1.easy sass 安装成功直接可以使用scss语法 自动生成开发版本和生产版本的css
比如：
新建test.scss 执行后生成test.css和test.min.css文件

2.live server 静态页面热更新插件,安装完成后,直接选择html页面,鼠标右击可以看到启动命令：open with five server，启动完成自动生成一个开发服务器 http://localhost:5555,修改代码可以自动保存和更新页面，不需要手动刷新页面。

3.Image preview 安装完成 鼠标移入到url上会显示图片详情信息和图片

4.Auto Close Tag html自动闭合补全插件

5.Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code 将vscode英文版切换为中文版

6.Easy LESS less预编译器处理 同easy sass功能类似

7.Beautify css/sass/scss/less 美化css/sass/scss/less代码

目录

阿里云对新人也太好了，几十块钱就一年。。。 

持续更新，欢迎推荐好的插件。

一、基础

二、优化

三、框架

四、MarkDown

五、工具

---

---

阿里云对新人也太好了，几十块钱就一年。。。

---

持续更新，欢迎推荐好的插件。

汉化。Chinese

npm Intellisense    npm 模块导入插件

Sync Settings       设置同步插件，不用每次配置，云同步

一、基础

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   代码格式化。

• 小技巧：对象或者解构赋值老是换行。
• 在vscode 设置里面修改如下

  "beautify.config": {  "brace_style": "collapse,preserve-inline"}

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   （非常棒的一个错误提示工具）

7. Polacode  (代码截图工具)

8.  JavaScript Booster （检测优化你的代码）

 

9.  REST Client  （编辑器调试接口）

 

VScode应该是很多学习前端的小伙伴很熟悉的开发工具了
与其他前端编译器比起来，VsCode最大的特点就是美观，可以说是WebStorm，HBuilder遥不可及的！
下面就来看看 vscode小白如何快速上手这款好用的编译器吧

常用且实用的插件：

Auto Close Tag (自动闭合HTML/XML标签)

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

Beautify (格式化 html ,js,css)

Bracket Pair Colorizer(给括号加上不同的颜色，便于区分不同的区块)

Debugger for Chrome(映射vscode上的断点到chrome上，方便调试)

ESLint(js语法纠错，可以自定义配置)

GitLens(方便查看git日志)

HTML CSS Support (智能提示CSS类名以及id)

HTML Snippets(智能提示HTML标签，以及标签含义)

JavaScript(ES6) code snippets(ES6语法智能提示，以及快速输入)

jQuery Code Snippets(jQuery代码智能提示)

Markdown Preview Enhanced(实时预览markdown)

markdownlint(markdown语法纠错)

Material Icon Theme(vscode图标主题)

Icon fonts(图标字体)

open in browser(右键快速在浏览器中打开html文件)

Path Intellisense(自动提示文件路径)

React/Redux/react-router Snippets(React/Redux/react-router语法智能提示)

Vetur(Vue多功能集成插件，错误提示等)

Class autocomplete for HTML(智能提示HTML class =“”属性)

npm Intellisense(require 时的包提示)