团队代码风格统一、一键格式化整个项目、自动格式化代码

在团队项目开发中，由于大家的代码风格不一致，会导致代码难以管理，看起来很烂，新人难以快速看懂等问题。
通过下面的方式，可以一键格式化整个项目，在按下保存时，大家的代码风格将会保持为一致。

以下文章适合于vscode编译器

一，安装插件到开发环境：cnpm i prettier eslint-config-prettier eslint-plugin-prettier -D

二， 添加必要的配置：
1，在根目录新建.vscode而文件夹，下面新建settings.json文件，这样就可以在保存时使用
prettier和eslint自动格式一下代码，验证一下错误。
内容如下：

{
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        "html",
        "typescript",
        "vue",
    ],
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    "[vue]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    }
}

2，根目录新建.prettierrc文件，这是Prettier的规则，你可以定制

{
  "printWidth": 150,
  "tabWidth": 2,
  "trailingComma": "none",
  "arrowParens": "avoid",
  "endOfLine": "auto",
  "jsxBracketSameLine": false,
  "htmlWhitespaceSensitivity": "ignore",
  "semi": true
}

3，根目录新建.eslintrc.js，eslint规则

module.exports = {
  root: true,
  env: {
    node: true
  },
  plugins: ["prettier"],
  extends: ["plugin:vue/essential", "eslint:recommended", "plugin:prettier/recommended"],
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "error" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
    "prettier/prettier": "error"
  },
  globals: { // 不希望被eslint报错的全局变量
    AMap: true 
  },
  parserOptions: {
    ecmaVersion: 2018,
    sourceType: "module",
    parser: "babel-eslint"
  }
};

三,清空个人的格式化配置，避免影响到工作区的配置
打开设置

找到用户设置的json文件

清空settings.json文件
当然，
如果你来点个性化配置也可以加一点，
eg:字体调整大小：
{
“editor.fontSize”: 18
}
四，安装vscode插件：
ESLint，Prettier - Code formatter，Vetur

五.注意事项
a, 有些项目可能在package.json文件配置了 eslint规则 需要删除 eslintConfig 字段。
b,.vscode文件夹，需要提交到Git仓库，避免大家的不一致。需要在.gitignore文件去掉.vscode字段
c, 屏蔽项目中的全局变量报错可以在 .eslintrc.js，添加需要屏蔽的变量
eg:
globals: {
AMap: true // 屏蔽百度地图报undefined
},
六，一键格式化整个项目
在package.json添加一键格式化所有代码的脚本

 "prettier": "prettier --config ./.prettierrc --write \"./**/*.{js,jsx,vue}\" "

{js,jsx,vue}可以添加css,json,sass,less等你想格式化文件
执行 npm run prettier，就可以格式化整个项目