Vue Cli 3 & VSCode 开发环境配置

问题

最初的时候手动安装了 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 到项目后，只需要安装一个插件，无需再做额外的配置