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:

修改为
,与之匹配的标签名称也随之更改

Stylelint

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

可以通过扩展来解析css预处理器语言(例如 SCSS、Sass、Less等)以及HTMLMarkdownCSS-in-JSvue 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

代码基础报错插件

你可能感兴趣的:(辅助:,vscode)