vue项目代码格式不统一怎么办？一招教你解决

问题背景

现有业务项目中，开发人员使用的ide五花八门，既有Visual Studio Code、webstorm，也有idea、pycharm这种偏后端的ide；而且各自设置的code style也不一致，为了统一团队风格，减少后期代码维护量，决定进行整改。

方案分析

如果你用的是vscode，可以参照这里进行配置，此篇不再赘述。

现有主流的前端格式化工具是prettier，在vscode和idea中都有相应的插件：

鉴于笔者常用的开发工具是JetBrains系列，下面以idea为例，教你三招搞定配置：

1、在package.json中增加prettier的依赖以及运行脚本

{
  "scripts": {
    "eslint": "eslint src --ext .js,.jsx,.vue",
    "eslint:fix": "eslint src --ext .js,.jsx,.vue --fix"
  },
  "devDependencies": {
    "eslint-config-prettier": "^8.5.0"
  }
}

我们仅需要在本地及开发环境中配置prettier即可，所以加入该依赖到devDependencies，并且需要在scripts里加上"eslint:fix"，让它作为eslint的一个插件，在保存代码时自动运行。

2、修改.eslintrc.js，去除所有vue-cli自动生成的规范，自定义插件及规范

主要是在插件中添加plugin：

  extends: ['plugin:vue/vue3-essential', 'eslint:recommended', 'plugin:prettier/recommended']

鉴于vue自带的规范检查可能跟eslint有冲突，可以全部修改为eslint的，参考配置文件如下：

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
  },
  extends: ['plugin:vue/vue3-essential', 'eslint:recommended', 'plugin:prettier/recommended'],
  parserOptions: {
    parser: 'babel-eslint',
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    // WS003-前端开发规范-JavaScript-引用
    'prefer-const': [
      'warn',
      {
        destructuring: 'any',
        ignoreReadBeforeAssign: false,
      },
    ],
    'no-const-assign': 'error',
    'no-var': 'warn',
    // WS003-前端开发规范-JavaScript-对象
    'no-new-object': 'warn',
    'object-shorthand': ['warn', 'always'],
    'no-prototype-builtins': 'error',
    'no-array-constructor': 'warn',
    // WS003-前端开发规范-JavaScript-解构赋值
    'prefer-destructuring': 'off',
    // WS003-前端开发规范-JavaScript-字符串
    'prefer-template': 'warn',
    'no-eval': 'error',
    'no-useless-escape': 'off',
    "template-curly-spacing": "off",
    // WS003-前端开发规范-JavaScript-函数
    'no-new-func': 'error',
    'space-before-function-paren': [
      'error',
      {
        anonymous: 'always',
        named: 'never',
        asyncArrow: 'always',
      },
    ],
    'space-before-blocks': ['error', 'always'],
    'func-style': 'off',
    'wrap-iife': ['error', 'inside'],
    'no-loop-func': 'error',
    'no-param-reassign': 'error',
    'prefer-spread': 'error',
    // WS003-前端开发规范-JavaScript-箭头函数
    'prefer-arrow-callback': 'error',
    'arrow-spacing': 'error',
    'arrow-body-style': [
      'error',
      'as-needed',
      { requireReturnForObjectLiteral: false },
    ],
    // WS003-前端开发规范-JavaScript-类&构造函数
    'no-useless-constructor': 'error',
    'no-dupe-class-members': 'error',
    // WS003-前端开发规范-JavaScript-模块
    'no-duplicate-imports': 'error',
    'no-iterator': 'error',
    // WS003-前端开发规范-JavaScript-变量声明
    'no-undef': 'error',
    'no-unused-vars': 'error',
    // WS003-前端开发规范-JavaScript-比较运算符&相等
    eqeqeq: 'off',
  },
};

3、添加.prettierrc.js，自定义prettier插件的配置

以下配置仅供参考：

module.exports = {
  printWidth: 80,
  tabWidth: 2,
  useTabs: false,
  semi: false,
  singleQuote: true,
  quoteProps: 'as-needed',
  jsxSingleQuote: false,
  trailingComma: 'none',
  bracketSpacing: true,
  jsxBracketSameLine: true,
  arrowParens: 'avoid',
  endOfLine: 'auto',
};

4、修改JetBrains系列配置，保存时自动格式化eslint

打开settings，按图示修改一下eslint配置：

然后修改一下actions on save，确保只勾选图示两个框，避免idea自带格式化和eslint格式化冲突：

最后，按CTRL+k，打开commit code时的设置;

确保不要勾选下面三个按钮：

最佳实践

1、如果你用的是vscode，可以参照这里进行配置，此篇不再赘述。

2、如果你用的是JetBrains系列，可以参照上面的步骤。