目录
- 背景
- 安装插件
- Ctrl + S 打造组合拳
1 背景
平时在公司开发Vue项目中，需要配置VSCode，网上也一大推，但是感觉总是不满意，不是因为别人的配置不够好，有些东西需要自己摸索了才知道哪里有坑，直接拷贝别人的配置也学不到什么，索性自己探索了一下。有以下好处：
- 提高编码效率
- 团队协同，风格统一
- 可以很好的学习这块的知识
2 安装插件
- One Dark Pro
- VSCode Great Icons
- Vetur
- Prettier
- ESLint
- StyleLint
- Auto Rename Tag
- Live Server
- View In Browser
- EditorConfig for VS Code
觉得这些挺实用的，暂时列举这些吧，当然网上还有很多，读者自己扩展吧。
One Dark Pro - 配置编辑器主题色
笔者使用了 One Dark Pro 作为编辑器的主题色，就是觉得喜欢这个风格，就是感觉舒服，没别的原因。
VSCode Great Icons - 配置编辑器文件夹图标
笔者使用了 VSCode Great Icons 作为编辑器的文件夹图标，觉得很不错，就是喜欢。
Vetur - 格式化 .vue 文件
语法高亮、智能感知、Emmet等。
Prettier - 配置编辑器代码格式化
比Beautify更好用的代码格式化插件。
ESLint - js代码检测
lint最初源于c语言，由贝尔实验室SteveJohnson开发，后来一个叫Nicholas的人在2013年推出了一个javascript的lint工具，又由于Javascript又称为ECMAScript（简称ES）,所以这个工具叫ESLint,不叫JSLint。
StyleLint - css代码检测
主要用于样式检查。
Auto Rename Tag - 更改标签名很实用
假如我把一个div改成span标签，如果没这个插件，我不仅改标签开始的位置，还要改标签结束的位置，有了这个插件会自动把结束的标签改了。
Live Server - 开启一个服务
选择一个html文件，右键选择open with live server可以很快的开启一个服务。
View In Browser - 浏览器打开html文件
很常用的一个操作。
EditorConfig for VS Code - 配合.editorconfig文件，定义项目的编码规范
编辑器的行为会与.editorconfig 文件中定义的一致，并且其优先级比编辑器自身的设置要高，这在多人合作开发项目时十分有用而且必要。
注意: 当你的项目中有.editorconfig文件的时候且使用VSCode编码时候，一定要安装这个插件，不然.editorconfig这个文件不会起作用，切记。
3 Ctrl + S 打造组合拳
1.组合拳-ctrl+s格式化javascript
- 项目中安装的有eslint包
- 项目中含有.eslint.js配置
- VSCode安装的有ESLint插件
- 配置settings.json
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
VSCode中settings.json的位置：preferences->settings ->settings.json
配置完后，这样就可以按ctrl+s自动格式化js代码，提高编码效率了。
2.组合拳-ctrl+s格式化css
- 项目中安装的有stylelint包
- 项目中含有.stylelint.js配置
- VSCode安装的有StyleLint插件
- 配置settings.json
"editor.codeActionsOnSave": {
"source.fixAll.stylelint": true
}
配置完后，这样就可以按ctrl+s自动格式化css代码，提高编码效率了。
3.组合拳-ctrl+s格式化模版html
在.eslint.js配置如下代码：
// vue模版中缩进
'vue/html-indent': ['error', 2, {
'attribute': 1,
'baseIndent': 1,
'closeBracket': 1,
'alignAttributesVertically': true,
'ignores': []
}],
看完点个关注，点个赞，笔芯❤️。
