VSCode 常用插件
1.Easy LESS — 自动转换less文件为 css文件
2.Auto Close Tag — 自动闭合HTML标签
3.Auto Rename Tag — 修改HTML标签时,自动修改匹配的标签
4.background — 背景
5.beautify— javascript, JSON, CSS, Sass, HTML 代码格式化工具
6.Beautify css/sass/scss/less — 代码高亮
7.CSS Peek — 自动查找CSS文件
8.Debugger for Chrome — 调试JavaScript
9.Easy Sass — scss/sass文件保存可自动生成并同步编译成同名css文件
10.Easy WXLESS — 微信小程序WXSS文件专用,保存可自动生成并同步编译成同名css文件
10.File Peek — 鼠标移到路径名按住ctrl可打开文件
11.Git History — git log
12.GitLens — 显示文件最近的commit和作者,显示当前行commit信息
13.HTML Class Suggestions — 类名命名提示
14.HTML CSS Support — CSS的智能补全
15.HTML Snippets — 回车或tap生成标签
16.Indenticator — 缩进高亮
17.IntelliSense for CSS class names — CSS类名智能命名提示
18.JavaScript (ES6) code snippets — JS语法提示
19.JavaScript Snippet Pack — 代码片段(Tab或者Enter补全),Console命令,DOM — 文档对象模型,Loop,Function,Timer,NodeJS,BDD,Misc
20.Live Server — http服务器(相当于使用nodejs的http-server,首选项-设置-用户设置可配置更改端口:”liveServer.settings.port”: 8999)
21.npm — 运行npm命令
22.npm Intellisense — 导入模块时,提示已安装模块名称
23.OneDark-Pro — Atom’s ionic主题(首选项-颜色主题修改主题)
24.Output Colorizer — 彩色输出信息
25.Path Intellisense — 编辑器中输入路径时,自动补全
26.Prettier-Code formatter — 代码格式化(四个空格缩进:”prettier.tabWidth”: 4)
27.px2rem — px值转rem
28.stylelint — CSS/SCSS/LESS检查工具
(首选项-设置-用户设置配置:
“stylelint.enable”: true,
“css.validate”: false,
“scss.validate”: false
)
29.SVG Viewer — 预览SVG图片
30.Vetur — Vue语法高亮
31.VSCode Great Icons — 文件图标(首选项-文件图标主题修改)
32.VSCode-Element-Helper — elementUI语法提示高亮
33.vue — Vue语法高亮(
首选项-设置-用户设置配置:
“emmet.syntaxProfiles”: {
“vue-html”: “html”,
“vue”: “html”
})
34.Vue 2 Snippets — 基于最新的 Vue 官方语法高亮文件添加了语法高亮,并且依据 Vue 2 的 API 添加了代码补全
35.Vue Peek — 查找vue组件文件
36.VueHelper — vue代码提示插件,包括了vue2所有api,vue-router2和vuex2的代码提示。配置如下
首选项-设置-用户设置配置:
小程序语法高亮:
“files.associations”: {
“.vue”: “vue”,
“.wpy”: “vue”,
“.wxml”: “html”,
“.wxss”: “css”
}
个人习惯配置:
“editor.lineHeight”: 26, // 行高
“editor.fontSize”: 16, // 字体
“editor.wordWrap”: “on” // 自动换行
“editor.formatOnSave”: true // 保存自动格式化代码