【Web】VS Code那些好用的前端插件

• VS Code没了IDE的沉重，又可以装插件获得同样强大的功能，可以说是一款相当优秀的高度定制化的轻量级编辑器

〇、准备工作

• Chinese (Simplified) Language Pack for Visual Studio Code：中文（简体）语言包
  

• Code Runner：代码运行插件
  

• Debugger for Chrome 和 Debugger for Firefox：浏览器调试
  

• open in browser：在默认浏览器中打开当前文档
  安装后右键可以看到这两个选项：
  

• Live Server：本地服务器，方便同步查看网页
  
  安装后右键会出现以下两个选项：
  

• Prettier：强大的代码格式化插件，主要解决代码风格问题（顺便一提，vscode自带的格式化快捷键是alt+shift+f）
  

• Path Intellisense：可以在代码中帮助你补全路径
  

一、HTML

• Auto Rename Tag：自动重命名标签，比如双标签改一个另一个会自动改
  
• HTML Snippets：HTML代码片段。代码片段类似于模板，有助于快速编写代码
  

二、CSS

• IntelliSense for CSS class names in HTML：自动补全类名
  

• HTML CSS Support：主要功能也是补全类名，和上面的插件二选一即可

• JS &CSS minifier(Minify)：CSS和JS代码的压缩工具
  

三、JavaScript

• ESLint：JavaScript代码检查工具，主要解决的是代码质量问题，配合prettier一起使用风味更佳（有冲突设置一下就行）
  
• JavaScript(ES6)code snippets：ES6代码片段
  

四、LESS

• Easy LESS ：可以从less直接生成对应的css代码，保存即更新，非常好用。
  

五、Bootstrap

• Bootstrap 3 Snippets ：Bootstrap 3代码片段
• Bootstrap 4, Font awesome 4, Font Awesome 5 Free & Pro snippets：Bootstrap 4代码片段+font awesome图标字体+其他代码片段
  

六、Vue

• Vetur：Vue代码工具
  
• Vue Peek：Vue引用查看
  
• VueHelper：Vue代码段
  

七、Git

• GitLens — Git supercharged：git源代码管理插件，可以直接在光标处显示代码编写人以及时间
  

七、配色主题

• 深色主题个人用的比较多的是自带的Dark主题和Atom One Light Theme
• 浅色主题更喜欢Brackets Light Pro Bold和自带的Solarized Light微微泛黄的护眼主题
  
  

想配置自己喜欢的配色主题可以动动手，下面也推荐几个还不错的主题供大家参考 ↓

• Atom One Dark Theme 和 Atom One Light Theme
  
• Brackets Light Pro：包括两个浅色主题
  
• GitHub Plus Theme
  
• Eva Theme（包括dark和light主题）
  
  
• Ayu：包括2个浅色颜色主题和4个深色主题
  
  

八. 其他

• 驼峰翻译助手：变量名转换+翻译，个人使用变量转换居多，生产力工具，非常好用。使用方法非常简单，选中需要转换的变量，command+shift+t 唤起选项，windows是 alt+shift+t
  
  

• Bookmarks：一个好用的书签工具，option+command+k标记/取消标记，option+command+j/l 跳转上一个/下一个标记点，对于管理庞大的项目和细碎的修改点非常有用
  

• Github Copilot：github推出的AI神器，可以进行代码推断、代码分析，具体配置方式可以自行搜索
  

• PlantUML：以代码的形式写画uml，习惯语法后很方便，技术方案写作常用
  

• TODO Highlight：高亮你的 @TODO: