VSCode for Vue 配置(Vue + prettier + ESLint) 安裝插件 具體配置

安裝插件

prettier 代碼格式化工具

安裝後格式化代碼(alt + shift + f)的同時也可以自動修復小問題。

配置文檔:官方文檔

配置方式:

1. VSCode 全局配置：settings.json
2. 項目特殊配置: 項目目錄下創建 .prettierrc

常用配置項:

• eslintIntegration: 讓prettier使用eslint的代碼格式進行校驗, true
• stylelintIntegration: true
• tabWidth: tab 寬度, 2
• semi: 是否使用分號結尾, false
• trailingComma: 尾後是否加逗號, es5 - 在ES5中有效的尾隨逗號
• singleQuote: 使用單眼號，true

ESLint 代碼檢查工具

文檔

Vetur: vue 相關工具

代碼語法高亮，快捷鍵

Vue 2 Snippets 快捷鍵

和 Vetur 功能有重複的地方，不過個人認爲這個好用點。

具體配置

VSCode 全局設置

VSCode settings.json 文件添加下面設置：

可能與你原來的設置有重複的項目，按照你自己需要選擇即可

  "eslint.validate": [
    "javascript",
    {
      "language": "html",
      "autoFix": true
    },
    {
      "language": "vue",
      "autoFix": false
    }
  ],
  "eslint.autoFixOnSave": false,
  "[css]": {
    "editor.defaultFormatter": "MikeBovenlander.formate"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[less]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "prettier.eslintIntegration": true,
  "prettier.semi": true,
  "prettier.singleQuote": true,
  "prettier.disableLanguages": ["html"],
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "vetur.validation.template": false,
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": "force-aligned"
    }
  },
  "[json]": {
    "editor.defaultFormatter": "vscode.json-language-features"
  },
  "[html]": {
    "editor.defaultFormatter": "vscode.html-language-features"
  },
  "[vue]": {
    "editor.defaultFormatter": "octref.vetur"
  },

項目中 ESLint 設置

.eslintrc.js:

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: ['plugin:vue/essential', '@vue/prettier'],
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'prettier/prettier': 'off',
  },
  parserOptions: {
    parser: 'babel-eslint',
  },
};

項目依賴相關

  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.6.0",
    "@vue/cli-plugin-eslint": "^3.6.0",
    "@vue/cli-service": "^3.6.0",
    "@vue/eslint-config-prettier": "^4.0.1",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "lint-staged": "^8.1.5",
    "vue-template-compiler": "^2.5.21"
  }

版本號可能需要升級，創建於: 2019/4/19