問題

最初的時候手動安裝了 Vetur、ESLint、TSLint、Prettier、Beautify，出現(xiàn)了 js 格式化沖突的問題，在配置文件 setting.json做了大量修復，但仍然存在各種問題，如vue.config.js等外部的配置文件，無法正常格式化。

后來發(fā)現(xiàn)了個很好的插件包Vue VS Code Extension Pack，幾乎完美解決了這個問題，但需要刪除一些會出現(xiàn)沖突的插件。

配置過程

以下省略了 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 時會觸發(fā) 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 里編寫代碼時會觸發(fā) 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 到項目后，只需要安裝一個插件，無需再做額外的配置