vue、vscode配置eslint+prettier

安装

• vue工程
  • 创建vue工程时，选择eslint + prettier
  • 根目录下会生成.eslintrc.js文件，这里配置prettier、检查规则
• vscode安装插件
  • eslint
  • prettier
  • vetur

常见问题描述

使用vscode开发vue项目时，保存文件时，句尾会自动加上分号，单引号也会变为双引号。

原因

prettier格式化代码时，默认句尾会加分号和使用双引号。vue工程里代码会被格式化两次，第一次是vscode里vetur调用prettier，第二次是eslint时调用prettier。所以在vscode的settings.json里设置是无效的。

解决方案

• .eslintrc.js 配置

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: ['plugin:vue/essential', '@vue/prettier'],//需要dev依赖里安装eslint-config-prettier
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
    //下面是核心设置，会覆盖vscode关于prettier的设置
    'prettier/prettier': [
      'error',
      {
        semi: false,
        singleQuote: true,
        printWidth: 160,
        endOfLine: 'auto'
      }
    ]
  },
  parserOptions: {
    parser: 'babel-eslint'
  }
}

• vscode settings.json 配置

{
    "editor.formatOnSave": true,
    //项目配置
    "[vue]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[javascript]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[scss]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[json]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[html]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
      },
    //非项目配置
    "prettier.tabWidth":2,
    "prettier.semi": false,
    "prettier.singleQuote": true,
    "prettier.printWidth": 160
  }

参考地址