5分钟学会用 ESLint+Prettier 统一前端代码风格

开篇：在多人合作的时候，代码风格不统一往往是很让人头痛的一件事，此文旨在用最精简的话语，让你学会如何运用ESLint+Prettier 统一前端代码风格。

step 1 ---- 安装并初始化ESLint

npm install eslint --save-dev
复制代码

eslint --init
复制代码

启用 standard 代码编写风格，并安装 standard

npm install eslint-plugin-standard --save-dev 
复制代码

step 2 ---- 安装 Prettier 并配置 .eslintrc.js

npm install --save-dev eslint-plugin-prettier eslint-config-prettier prettier-eslint-cli
复制代码

.eslintrc.js 文件配置如下:

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: [
    'plugin:vue/essential',
    'plugin:prettier/recommended',
    '@vue/standard',
  ],

  parserOptions: {
    parser: 'babel-eslint',
  },

  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    //强制使用单引号
    quotes: ['error', 'single'],
    //强制不使用分号结尾
    semi: ['error', 'never'],
    // 关闭冲突规则
    'prettier/prettier': [
      'error',
      {
        singleQuote: true,
        trailingComma: 'none',
        bracketSpacing: true,
        jsxBracketSameLine: true,
        parser: 'flow',
      },
    ],
  },
};
复制代码

step 3 ---- 设置 VScode ESLint 扩展

安装 VScode ESlint 插件

文件 --> 首选项 --> 设置 ---> 扩展 找到ESLint，并打开Eslint:Options下的setting.json。

注意： 用户设置指的是所有项目将用于此设置， 工作区设置为当前项目所用的设置

拷贝如下代码

{
    // vscode默认启用了根据文件类型自动设置tabsize的选项
    "editor.detectIndentation": false,
    
    // 重新设定tabsize
    "editor.tabSize": 2,
    
    // 每次保存的时候自动格式化
    "editor.formatOnSave": true,
    
    // 每次保存的时候将代码按eslint格式进行修复
    "eslint.autoFixOnSave": true,
    "extensions.ignoreRecommendations": true,
    
    // 让prettier使用eslint的代码格式进行校验
    "prettier.eslintIntegration": true,
    
    // 去掉代码结尾的分号
     "prettier.semi": false,
    
    // 使用单引号替代双引号
    "prettier.singleQuote": true,
    
    // 添加 vue 支持
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        {
            "language": "vue",
            "autoFix": true
        }
    ],
    
    // 使用单引号替代双引号
    "vetur.format.defaultFormatter.stylus": "stylus-supremacy",
    
    // 代码美化选择
    // "vetur.format.defaultFormatter.html": "js-beautify-html",
    
    // 让vue中的js按编辑器自带的ts格式进行格式化
    "vetur.format.defaultFormatter.js": "vscode-typescript",
    
    // vue组件中html代码格式化样式
    "vetur.format.defaultFormatterOptions": {
        "js-beautify-html": {
            "wrap_attributes": "force-aligned"
        }
    },
    
    
    // 格式化beautify配置 ##用户自己选择,本次用的是 prettier
    "beautify.language": {
        "js": {
            "type": [
                "javascript",
                "json",
                "jsonc"
            ],
            "filename": [
                ".jshintrc",
                ".jsbeautifyrc"
            ]
        },
        "css": [
            "css",
            "scss"
        ],
        "html": [
            "htm",
            "html",
            "vue"
        ]
    },
}
复制代码

保存后重启VScode客户端， 然后按 Shift+Alt+f 既可以格式化代码。

注意： 此文的一些说明，不做过多的赘述，请大家科学上网，教程比较详细。