详解如何在vue项目中使用eslint+prettier格式化代码

安装eslint-plugin-prettier  配合eslint使用prettier,安装eslint-config-prettier禁用一些eslint和prettier冲突的规则，安装prettier-eslint-cli 使我们可以敲命令格式化代码

在.eslintrc.js  plugin和extends中添加prettier支持  rules中添加规则

 extends: [
    'plugin:vue/essential',
    'eslint:recommended',
    'plugin:prettier/recommended'
  ],
  // required to lint *.vue files
  plugins: ['vue', 'prettier'],
  // add your custom rules here
  rules: {
    'prettier/prettier': 'error',
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
  }

在page.json  script中添加配置   执行npm run format就可以格式化代码了

"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "lint": "eslint --fix --ext .js,.vue src",
    "build": "node build/build.js",
    "format": "prettier-eslint --write "src/**/*.js" "src/**/*.vue""
  },

当我们执行npm run format时还会报各种奇怪的错误 如：error: Delete ⏎ (prettier/prettier) at src/pages/xxx 等；这是因为prettier配置和编辑器prettier配置冲突导致的   在rules中配置下覆盖掉就可以了

"rules": {
 "no-console": 0,
 "prettier/prettier": [
  "error",
  {
   "singleQuote": true,
   "trailingComma": "none",
   "bracketSpacing": true,
   "jsxBracketSameLine": true
  }
 ]}

现在我们就可以愉快的编码了