vscode 前端常用必备插件汇总

一、基础

1.HTML Snippets   智能提示HTML标签，以及标签含义

 

2.HTML CSS Support   智能提示CSS类名以及id 

 

3.JavaScript(ES6) code snippets     ES6语法智能提示，快速输入，还支持.js，还支持.ts，.jsx，.tsx，.html，.vue

 

4. jQuery Code Snippets 　jQuery代码智能提示

 

5. Code Runner  运行js等。

 

6. TypeScript Hero  TS开发提示工具

 

二、优化

1.Bracket Pair Colorizer     给括号加上不同的颜色，便于区分不同的区块，使用者可以定义不同括号类型和不同颜色

 

2.Auto Close Tag    自动闭合HTML/XML标签

 

3.Auto Rename Tag    自动完成另一侧标签的同步修改

 

4.open in browser   支持右键打开文件。

 

5.Path Intellisense   自动提示路径，快速导入文件。

 

6.Material Icon Theme   好看的文件图标。

 

7.Source Code Pro    好看的字体

 

8.Beautify   代码格式化。

 

8.Power  Mode 酷炫的输入动效

 

9.Document This    js代码规范注释

 

10.Code Spell Checker     英语拼写检测，对于js命名很有用哦

 

11.vscode-fileheader     作者个人信息注释，自动保存最后代码书写时间

 

12. ESLint               js语法检测，痛并快乐着。

 

13.codelf       程序员命名神器，支持多种语言。

 

 

14. Visual Studio Code Commitizen Support       git提交规范插件。 

 

 

15。koroFileHeader （快捷代码注释插件）

 

16。 Project Manager  多个项目管理插件。

 

17. Prettier ESLint （eslint格式化工具）

 

 

三、框架

1.Vetur    Vue多功能集成插件，包括：语法高亮，智能提示，emmet，错误提示，格式化，自动补全，debugger

 

2.React/Redux/react-router Snippets    react智能提示。

 

3.Angular 5 Snippets      angular智能提示。

 

4.Node.js Modules Intellisense      node.js智能提示。 

 

5. Element UI Snippets   element UI提示

 

6. ES7 React/Redux/GraphQL/React-Native snippets （更加好用的react提示工具，丰富的快捷键）

 

7. NestJs Snippets （nest.js提示工具）

 

8. Volar （vue3提示工具，兼容一些新特性）

 

9. Vue 3 Snippets (vue2,vue3的一些快捷代码块)

 

四、MarkDown

 1.Markdown Preview Enhanced   （可以用markdown语法编辑，预览）

 

2. Markdown Table Formatter   （markDown 格式化插件）

 

五、工具

1. px to rem （px转换rem工具）

 

2.  Remote - SSH （连接服务器管理文件）

 

3. GitLens （文件修改记录器）

 

4. Import Cost （显示引用包大小）

 

5. koroFileHeader （快捷注释，国产依赖，文档友好）

 

6. Error Lens   （非常棒的一个错误提示工具）

 今日就分享到这了，多多点赞和关注哦，更多福利下方领取！