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