VSCode 开发必备插件

Chinese（Simplified）(简体中文)

VSCode 中文

Error Lens

代码基础报错提示， 必备

HTML CSS Support

html 和 css 支持,  提示

Auto Close Tag

自动补全 html 标签

Auto Rename Tag

修改 html 标签，自动帮你完成尾部闭合标签的同步修改

Auto Complete Tag

编写 HTML 或者 JSX 代码过程中 eg:

将 <div> 修改为 <section> ，与之匹配的标签名称也随之更改

Stylelint

简介 Stylelint 是一个强大、先进的 CSS 代码检查器（linter），可以帮助你规避 CSS 代码中的错误并保持一致的编码风格。

可以通过扩展来解析css预处理器语言(例如 SCSS、Sass、Less等)以及HTML、Markdown、CSS-in-JS、vue SFCs等模板文本中提取内嵌的样式代码

Auto Import

可以帮助我们自动删除无用的包Import (未被引用)，以及自动Import填充尚未导入的包

Path Intellisense

在编辑器中输入路径时，自动补全。

Path Autocomplete

在vscode中使用 @ 提示路径

Todo Tree

标记。 左侧资源管理器 树状 ， 可以看到进行中的标记

eg:  # TODO 进行中 ......

ENV 

对环境变量文件 的扩展插件，可以打开 .env 文件

Live Server

实现页面自动刷新， 假设本地服务器环境

右下角有个 Go Live 可以直接启动一个本地服务，用于打开 vue3 的打包后项目很不错 （vue3打包项目需要本地服务器启动）

open in browser

vscode 打开 html 文件，可以自由选择用哪个浏览器打开

eg: html 页面 alt + b  =  打开默认浏览器

Auto-Save on Window Change

自动保存文件 = ctrl + s

Material Icon Theme

文件icon图标 （偏圆润）

Prettier - Code Formatter 格式化文档

让代码更漂亮， Shift + Alt + F 格式化文档。 相当于鼠标右键， 格式化文档

结合 ESLint 使代码规范

ESLint 代码规范

crtl + s

eslint插件能够检测代码语法问题，与格式问题，对项目代码风格统一至关重要

eg: 

1.   alt+shit+f 可以格式化代码 => 但是代码不规范会爆红，

2.   装了eslint 后直接 ctrl+s 保存后就自动格式化代码

px to rem & rpx & vw

移动端或者大屏适配  rem 会用的到。具体设置里改基数

选中按Alt + Z可以px和rem转换

Vue2 使用 vetur 插件
Vue3 建议禁用 vetur 使用 volar

vetur （vue2）

vue 开发必备插件， .vue 文件支持：

语法错误检查，包括 CSS/SCSS/LESS/Javascript/TypeScript

语法高亮，包括 html/jade/pug css/sass/scss/less/stylus js/ts emmet 支持

代码自动补全（目前还是初级阶段），包括 HTML/CSS/SCSS/LESS/JavaScript/TypeScript 配合 ESLint 插件使用效果更佳

Vue - official (Volar)  (vue3)

相当于vetur , 需要禁用vetur, vue3支持更好

Vue VSCode Snippets  (vue2 vue3 代码片段提示)

该插件支持：Volar、Vue2 和 Vue3。

新建一个 .vue文件，输入 vbase会提示生成的模版内容：

React插件

Reactjs code snippets

代码提示插件

辅助插件 1,2,3

1.    React Redux ES6 Snippets

redux 库 ， （可能是 mobx 库，那就不要装这个了）

2.   Typescript React code snippets

ts

3.   Error Lens

代码基础报错插件