eslint + Prettier-Code formatter 快速上手配置 避坑

开发的过程当中，需要对代码进行统一的格式化，在工作中公司团队都会有属于自己的一套开发规则，为了更好的进行开发，需调试编辑器中的插件让代码更加的规范，这样很大程度提升了开发效率。

本章以vscode为例，eslint进行代码的约束提示， Prettier-Code formatter 来进行代码自动格式化：

1.安装插件

插件市场安装eslint

终端中全局安装eslint（在其他项目中也可以格式化）

npm install -g eslint

 2.打开setting.json 进行配置

点击编辑器左下角

设置 

右上打开设置json

 3.先将自己的setting配置代码放入 

注意将以下代码中的： "prettier.configPath": "C:\\Users\\xinlong\\.prettierrc",  替换成自己的文件存放路径，如果有中文，则中文（用户）改成Users  例子："C:\\用户\\xinlong\\.prettierrc"替换成"C:\\Users\\xinlong\\.prettierrc"

代码如下直接复制到setting中，改一下路径： 

{

    "workbench.colorTheme": "Default Dark+",

    "editor.tabSize": 2,

    "editor.fontSize": 16,

    "editor.minimap.enabled": false,

    // 配置 @ 路径提示

    "path-intellisense.mappings": {

      "@": "${workspaceRoot}/src"

    },

    "prettier.configPath": "C:\\Users\\xinlong\\.prettierrc",

    // 保存时自动格式化代码

    "editor.formatOnSave": true,

    // Eslint 插件配置

    "editor.codeActionsOnSave": {

      "source.fixAll": true

    },

    "eslint.alwaysShowStatus": true,

    // Prettier插件的配置

    // 无尾逗号

    "prettier.trailingComma": "none",

    // #prettier去掉代码结尾的分号

    "prettier.semi": false,

    // 每行文字超出此限制就会换行

    "prettier.printWidth": 300,

    // 使用单引号代替双引号

    "prettier.singleQuote": true,

    "prettier.arrowParens": "avoid",

    // #让函数(名)和后面的括号之间加个空格

    "javascript.format.insertSpaceBeforeFunctionParenthesis": false,

    // 设置 vue 中 HTML 代码的格式化插件

    "vetur.format.defaultFormatter.html": "js-beautify-html",

    "vetur.ignoreProjectWarning": true,

    "vetur.format.defaultFormatterOptions": {

      "prettier": {

        "trailingComma": "none", // 尾随是否有逗号

        "semi": false, // 末尾添加分号

        "singleQuote": true, // 使用单引号

        "arrowParens": "avoid",

        "printWidth": 300 // 每行字符个数

      },

      "js-beautify-html": {

        "wrap_attributes": false

      }

    },

    "[javascript]": {

      "editor.defaultFormatter": "esbenp.prettier-vscode"

    },

    "[html]": {

      "editor.defaultFormatter": "vscode.html-language-features"

    },

    "[vue]": {

      "editor.defaultFormatter": "esbenp.prettier-vscode"

    },

    "[jsonc]": {

      "editor.defaultFormatter": "esbenp.prettier-vscode"

    }

  }

 4.在编辑器中新建一个.prettierrc文件，内容如下，放到保存的路径下

{

 "semi": false,

 "singleQuote": true,

 "trailingComma": "none"

}

5.简单的配置就完成了，可以重启编辑器，在项目文件中测试吧

尝试双引号自动ctrl+s自动保存