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

绝地灬酷狼 2021-08-29 19:48 553阅读 0赞

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

以下文章适合于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"
      }
    };

三,清空个人的格式化配置，避免影响到工作区的配置  
打开设置  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzIwNjk0OQ_size_16_color_FFFFFF_t_70]  
找到用户设置的json文件  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzIwNjk0OQ_size_16_color_FFFFFF_t_70 1]  
清空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，就可以格式化整个项目

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzIwNjk0OQ_size_16_color_FFFFFF_t_70]: /images/20210813/c83096df4ceb4b60bb95e8f10e3b5977.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzIwNjk0OQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200526105014901.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzIwNjk0OQ==,size_16,color_FFFFFF,t_70