VSCODE编辑器常用插件推荐

之前一直使用webstorm,绝对是前端开发神器,但是在实习中,公司都使用VScode,也就跟着用了,发现,这才是真的神器呀,小巧轻便,又不失webstorm的所有功能,点赞。

转载自:https://blog.csdn.net/Che_rish/article/details/78893019

Auto Close Tag — 自动闭合HTML标签

Auto Rename Tag — 修改HTML标签时,自动修改匹配的标签

background — 背景

beautify— javascript, JSON, CSS, Sass, HTML 代码高亮

Beautify css/sass/scss/less — 代码高亮

CSS Peek — 自动查找CSS文件

Debugger for Chrome — 调试JavaScript

Easy Sass — scss/sass文件保存可自动生成并同步编译成同名css文件

Easy WXLESS — 微信小程序WXSS文件专用,保存可自动生成并同步编译成同名css文件

File Peek — 鼠标移到路径名按住ctrl可打开文件

Git History — git log

GitLens — 显示文件最近的commit和作者,显示当前行commit信息

HTML Class Suggestions — 类名命名提示

HTML CSS Support — CSS的智能补全

HTML Snippets — 回车或tap生成标签

Indenticator — 缩进高亮

IntelliSense for CSS class names — CSS类名智能命名提示

JavaScript (ES6) code snippets — JS语法提示

JavaScript Snippet Pack — 代码片段(Tab或者Enter补全),Console命令,DOM — 文档对象模型,Loop,Function,Timer,NodeJS,BDD,Misc

Live Server — http服务器(相当于使用nodejs的http-server,首选项-设置-用户设置可配置更改端口:”liveServer.settings.port”: 8999)

npm — 运行npm命令

npm Intellisense — 导入模块时,提示已安装模块名称

OneDark-Pro — Atom’s ionic主题(首选项-颜色主题修改主题)

Output Colorizer — 彩色输出信息

Path Intellisense — 编辑器中输入路径时,自动补全

Prettier-Code formatter — 代码格式化(四个空格缩进:”prettier.tabWidth”: 4)

px2rem — px值转rem

stylelint — CSS/SCSS/LESS检查工具 
(首选项-设置-用户设置配置: 
“stylelint.enable”: true, 
“css.validate”: false, 
“scss.validate”: false 

SVG Viewer — 预览SVG图片

Vetur — Vue语法高亮

VSCode Great Icons — 文件图标(首选项-文件图标主题修改)

VSCode-Element-Helper — elementUI语法提示高亮

vue — Vue语法高亮( 
首选项-设置-用户设置配置: 
“emmet.syntaxProfiles”: { 
“vue-html”: “html”, 
“vue”: “html” 
})

Vue 2 Snippets — 基于最新的 Vue 官方语法高亮文件添加了语法高亮,并且依据 Vue 2 的 API 添加了代码补全

Vue Peek — 查找vue组件文件

VueHelper — vue代码提示插件,包括了vue2所有api,vue-router2和vuex2的代码提示

首选项-设置-用户设置配置: 
小程序语法高亮: 
“files.associations”: { 
“*.vue”: “vue”, 
“*.wpy”: “vue”, 
“*.wxml”: “html”, 
“*.wxss”: “css” 
}