问题
最初的时候手动安装了 Vetur、ESLint、TSLint、Prettier、Beautify，出现了 js 格式化冲突的问题，在配置文件 setting.json做了大量修复，但仍然存在各种问题，如vue.config.js等外部的配置文件，无法正常格式化。
后来发现了个很好的插件包Vue VS Code Extension Pack，几乎完美解决了这个问题，但需要删除一些会出现冲突的插件。
配置过程
以下省略了 vue cli 3 安装过程，具体去看官方文档
安装插件
安装插件 Vue VS Code Extension Pack，包含了
- Vetur
- Vue Snippets
- Prettier
- Formatting toggle
- Bracket Pair Colorizer
- Bookmarks
- Jumpy
- NPM Intellisense
- ES6 Snippets
- Night Owl
删除或禁用掉与之冲突的插件
- Beautify
- TSLint
- ESLint
- Sublime Babel
配置 eslint .eslintrc.js
npm run serve 时会触发 eslint 检查
module.exports = {
root: true,
env: {
node: true
},
extends: ['plugin:vue/essential'],
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-unused-vars': ['warn']
},
parserOptions: {
parser: 'babel-eslint'
}
}
配置 prettier .prettierrc
vscode 里编写代码时会触发 prettier 检查
{
"semi": false,
"singleQuote": true,
"printWidth": 80,
"useTabs": false,
"tabWidth": 2,
"trailingComma": "none",
"jsxBracketSameLine": false
}
配置 .vscode/settings.json
{
"editor.tabSize": 2, // 所有文件缩进2个空格
"editor.formatOnSave": true, // 存储时自动格式代码
"files.trimFinalNewlines": true, // 删除掉文件结尾多余的空行
"files.insertFinalNewline": true // 文件结尾保留一个空行
}
记得把 vscode 用户配置文件提交到 git 仓库
git add -f .vscode/setting.json
总结
- 尽量减少 vscode 的配置项，而是通过插件初始化文件独立配置
- 配置跟着项目走，以便别人 Clone 到项目后，只需要安装一个插件，无需再做额外的配置
