VSCode工作区设置之插件安装
一、必备插件,必须安装!
-
Vetur
vue语法支持插件,提供vue代码高亮、代码提示、Emmet、代码格式化等功能,详见Vetur官网;
-
ESLint
提供js/vue等代码格式化、代码检测、错误修复等功能,详见ESLint官网; 因最新项目均使用TS作为基础开发语言,所有同时需要安装
TSLint
对应scss/css格式化需要安装stylelint
-
Prettier - Code formatter
可提供js/jsx/HTML/vue/css/scss等多种语言代码格式化、功能,详见Prettier官网; 在vue单文件组件中使用需要由Vetur设置;
-
npm Intellisense
引入node_modules包时提供代码提示
-
Path Intellisense
引入文件时提供代码提示,如果设置了路径别名,如
@/**
则需要设置jsconfig.js
或者tsconfig.js
文件; -
Code Spell Checker
单词拼写检查,有效减少代码拼写错误、代码命名不规范、等低级错误;
-
Bracket Pair Colorizer 2
代码块不同颜色区分
二、强烈推荐VSCode主题插件 (保证清晰代码高亮、文件类型识别)
- One Dark Pro
主题文件,用于代码高亮 - Material Icon Theme
图标主题,用于文件类型识别
三、Git插件 (commit历史,代码找回)
- Git History
commit历史查看,commitId获取,cherryPick代码恢复; - GitLens
commit变更文件查看,文件变更历史查看等高级操作,详情查看GitLens官网;
四、高效开发插件,强烈推荐安装! (成倍提升开发效率的插件)
- Auto Close Tag
自动关闭html标签 - Auto Rename Tag
自动同步修改html标签 - Element UI Snippets
element-ui的代码提示插件,高效开发element,强烈推荐! - change-case
修改变量格式,如小驼峰转横杆等 - JSON to TS
自动同步修改html标签 - javascript console utils
自动同步修改html标签 - Bookmarks
自动同步修改html标签 - TODO Highlight
自动同步修改html标签 - Vue Peek
自动同步修改html标签 - CodeMetrics
自动同步修改html标签 - JavaScript (ES6) code snippets
es6代码片段
五、其他插件
- Settings Sync
VSCode配置云同步插件,可插件保存列表,vscode设置,代码片段,快捷键等;