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 会用的到。具体设置里改基数
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 Language Features (Volar) (vue3)
相当于vetur , vue3支持更好
TypeScript Vue Plugin
是一个用于在Vue项目中提供对TypeScript支持的插件
Vue VSCode Snippets (vue2 vue3 代码片段提示)
该插件支持:Volar、Vue2 和 Vue3。
React插件
Reactjs code snippets
代码提示插件
辅助插件 1,2,3
1. React Redux ES6 Snippets
redux 库 , (可能是 mobx 库,那就不要装这个了)
2. Typescript React code snippets
ts
3. Error Lens
代码基础报错插件