VScode前端代码片段配置及前端插件安装

https://www.wkeyu.cn/144.html

用户代码片段配置

一、HTML代码片段配置步骤

二、Javascript代码片段配置步骤

三、CSS代码段配置步骤

VScode 常用插件

1. Chinese中文&＃xff08;简体&＃xff09;语言包

   

   作用&＃xff1a;将vscode语言更改为中文简体

2. open in browser

   作用&＃xff1a;该插件可以在通过编辑器打开默认浏览器显示代码效果。

   使用方式&＃xff1a;右键→选择open in browser
   

3. guides

• 作用&＃xff1a;显示代码对其辅助线

4. HTMLHint

   

   • 作用&＃xff1a;进行HTML代码检测

5. vscode-icons
   

   作用&＃xff1a;显示Visual Studio代码的图标

6. Import Cost

   作用&＃xff1a;该插件会在行尾显示导入包的大小&＃xff0c;为了计算包大小&＃xff0c;该插件要使用Webpack和babili-webpack-plugin

7. Path Intellisense
   

   作用&＃xff1a;这个插件可以很好的识别引入文件路径&＃xff0c;提供路径提示功能

8. material Theme

   • 作用&＃xff1a;颜色主题

9. prettier
   

   作用&＃xff1a;格式化美化代码

10. carbon-now-sh
    

    作用&＃xff1a;将代码生成一张图片

    使用方式&＃xff1a;
    1、选中需要生成图片的代码
    2、打开命令行托盘&＃xff1a;Window - Crtl &＃43; Shift &＃43; P
    3、输入Carbon&＃xff0c;点击它

11. Turbo Console Log
    

    作用&＃xff1a;开发必备的打印神器&＃xff0c;众所周知前端开发的时候会大量使用“console.log()”方法&＃xff0c;每次都手敲会十分不便。

    使用&＃xff1a;
    1、 选中变量之后Crtl &＃43; Alt &＃43; l
    2、 删除所有 console.log Alt &＃43; Shift &＃43; d
    3、 注释所有 console.log Alt &＃43; Shift &＃43; c
    4、 启用所有 console.log Alt Shift &＃43; u

12. Browser Preview
    

    作用&＃xff1a;如果没有双屏&＃xff0c;开发时就需要来回切换浏览器和编辑器&＃xff0c;这是开发前端页面的痛苦之处。这个插件可以在VS Code内直接打开浏览器&＃xff0c;边编辑代码边预览网页效果。

13. live server
    

    作用&＃xff1a;通过该插件可以开启本地服务器

14. Auto Rename Tag
    

    修改html标签&＃xff0c;自动帮你完成头部和尾部闭合标签的同步修改。

15. vetur
    

    vue多功能集成插件&＃xff0c;包括&＃xff1a;语法高亮&＃xff0c;智能提示&＃xff0c;emmet&＃xff0c;错误提示&＃xff0c;格式化&＃xff0c;自动补全&＃xff0c;debugger