使用ESlint，让你的代码更美

规则，让你变得更有分寸

让Eslint来约束你的代码

很早以前都是自己的在写项目，但发现自己的代码写出来还是少了些东西，看到网上都在使用Eslint等来进行加强写代码的风格，就抽空尝试了下

步骤1（这里以Vue项目为例）

在你的项目里实现安装好

 "eslint": "^6.7.2",
 "eslint-plugin-prettier": "^3.3.1",
 "eslint-plugin-vue": "^6.2.2",

步骤2

创建一个 .eslintrc.js 文件配置你要的 代码校验风格，可参考Eslint官网，下列是我自己的可简单参考下

module.exports = {
    root: true,

    parserOptions: {
       ecmaVersion: 2020,
       parser: '@typescript-eslint/parser', 
    },

    env: {
        browser: true,
        node: true,
        es6: true
    },

    extends: ["plugin:vue/recommended", "eslint:recommended"],
    // extends: [
    //   'plugin:vue/essential',
    //   '@vue/standard',
    //   '@vue/typescript/recommended'
    // ],
    // add your custom rules here
    //it is base on https://github.com/vuejs/eslint-config-vue
    rules: {
				"vue/no-mutating-props":0,				
				// 禁止空template/script/style标签
			  "vue/no-empty-component-block":2,
        "vue/max-attributes-per-line": [
            2,
            {
                singleline: 10,
                multiline: {
                    max: 1,
                    allowFirstLine: false
                }
            }
        ],
        "vue/singleline-html-element-content-newline": "off",
        "vue/multiline-html-element-content-newline": "off",
        "vue/name-property-casing": ["error", "PascalCase"],
        "vue/no-v-html": "off",
        "accessor-pairs": 2,
        "arrow-spacing": [
            2,
            {
                before: true,
                after: true
            }
        ],
        "block-spacing": [2, "always"],
        "brace-style": [
            2,
            "1tbs",
            {
                allowSingleLine: true
            }
        ],
        camelcase: [
            0,
            {
                properties: "always"
            }
        ],
        "comma-dangle": [2, "never"],
        "comma-spacing": [
            2,
            {
                before: false,
                after: true
            }
        ],
        "comma-style": [2, "last"],
        "constructor-super": 2,
        curly: [2, "multi-line"],
        "dot-location": [2, "property"],
        "eol-last": 2,
        eqeqeq: ["error", "always", { null: "ignore" }],
        "generator-star-spacing": [
            2,
            {
                before: true,
                after: true
            }
        ],
        "handle-callback-err": [2, "^(err|error)$"],
        indent: [
            2,
            2,
            {
                SwitchCase: 1
            }
        ],
        "jsx-quotes": [2, "prefer-single"],
        "key-spacing": [
            2,
            {
                beforeColon: false,
                afterColon: true
            }
        ],
        "keyword-spacing": [
            2,
            {
                before: true,
                after: true
            }
        ],
        "new-cap": [
            2,
            {
                newIsCap: true,
                capIsNew: false
            }
        ],
        "new-parens": 2,
        "no-array-constructor": 2,
        "no-caller": 2,
        "no-console": "off",
        "no-class-assign": 2,
        "no-cond-assign": 2,
        "no-const-assign": 2,
        "no-control-regex": 0,
        "no-delete-var": 2,
        "no-dupe-args": 2,
        "no-dupe-class-members": 2,
        "no-dupe-keys": 2,
        "no-duplicate-case": 2,
        "no-empty-character-class": 2,
        "no-empty-pattern": 2,
        "no-eval": 2,
        "no-ex-assign": 2,
        "no-extend-native": 2,
        "no-extra-bind": 2,
        "no-extra-boolean-cast": 2,
        "no-extra-parens": [2, "functions"],
        "no-fallthrough": 2,
        "no-floating-decimal": 2,
        "no-func-assign": 2,
        "no-implied-eval": 2,
        "no-inner-declarations": [2, "functions"],
        "no-invalid-regexp": 2,
        "no-irregular-whitespace": 2,
        "no-iterator": 2,
        "no-label-var": 2,
        "no-labels": [
            2,
            {
                allowLoop: false,
                allowSwitch: false
            }
        ],
        "no-lone-blocks": 2,
        "no-mixed-spaces-and-tabs": 2,
        "no-multi-spaces": 2,
        "no-multi-str": 2,
        "no-multiple-empty-lines": [
            2,
            {
                max: 1
            }
        ],
        "no-native-reassign": 2,
        "no-negated-in-lhs": 2,
        "no-new-object": 2,
        "no-new-require": 2,
        "no-new-symbol": 2,
        "no-new-wrappers": 2,
        "no-obj-calls": 2,
        "no-octal": 2,
        "no-octal-escape": 2,
        "no-path-concat": 2,
        "no-proto": 2,
        "no-redeclare": 2,
        "no-regex-spaces": 2,
        "no-return-assign": [2, "except-parens"],
        "no-self-assign": 2,
        "no-self-compare": 2,
        "no-sequences": 2,
        "no-shadow-restricted-names": 2,
        "no-spaced-func": 2,
        "no-sparse-arrays": 2,
        "no-this-before-super": 2,
        "no-throw-literal": 2,
        "no-trailing-spaces": 2,
        "no-undef": 2,
        "no-undef-init": 2,
        "no-unexpected-multiline": 2,
        "no-unmodified-loop-condition": 2,
        "no-unneeded-ternary": [
            2,
            {
                defaultAssignment: false
            }
        ],
        "no-unreachable": 2,
        "no-unsafe-finally": 2,
        "no-unused-vars": [
            2,
            {
                vars: "all",
                args: "none"
            }
        ],
        "no-useless-call": 2,
        "no-useless-computed-key": 2,
        "no-useless-constructor": 2,
        "no-useless-escape": 0,
        "no-whitespace-before-property": 2,
        "no-with": 2,
        "one-var": [
            2,
            {
                initialized: "never"
            }
        ],
        "operator-linebreak": [
            2,
            "after",
            {
                overrides: {
                    "?": "before",
                    ":": "before"
                }
            }
        ],
        "padded-blocks": [2, "never"],
        // 'quotes': [2, 'single', {
        //   'avoidEscape': true,
        //   'allowTemplateLiterals': true
        // }],
        semi: [2, "never"],
        "semi-spacing": [
            2,
            {
                before: false,
                after: true
            }
        ],
        "space-before-blocks": [2, "always"],
        "space-before-function-paren": [2, "never"],
        "space-in-parens": [2, "never"],
        "space-infix-ops": 2,
        "space-unary-ops": [
            2,
            {
                words: true,
                nonwords: false
            }
        ],
        "spaced-comment": [
            2,
            "always",
            {
                markers: [
                    "global",
                    "globals",
                    "eslint",
                    "eslint-disable",
                    "*package",
                    "!",
                    ","
                ]
            }
        ],
        "template-curly-spacing": [2, "never"],
        "use-isnan": 2,
        "valid-typeof": 2,
        "wrap-iife": [2, "any"],
        "yield-star-spacing": [2, "both"],
        yoda: [2, "never"],
        "prefer-const": 2,
        "no-debugger": process.env.NODE_ENV === "production" ? 2 : 0,
        "object-curly-spacing": [
            2,
            "always",
            {
                objectsInObjects: false
            }
        ],
        "array-bracket-spacing": [2, "never"]
    },

    'extends': [
      'plugin:vue/recommended',
      'eslint:recommended',
      '@vue/typescript'
    ]
};

步骤3（配置保存自动按照Eslint配置来格式化代码）

这里我使用的是Vscode，点击 文件 ----> 首选项 -----> 设置 -----> 工作区 (找到eslint部分 往下翻 找到 setting.json点击编辑) ，列出自己的配置

{
    "workbench.editor.enablePreview": false,
    "emmet.includeLanguages": {
      "javascript": "javascriptreact"
    },
    // vscode默认启用了根据文件类型自动设置tabsize的选项
    "editor.detectIndentation": false,
    // 重新设定tabsize
    "editor.tabSize": 2,
    // #每次保存的时候自动格式化
    //"editor.formatOnSave": true, 先禁止会和eslint的格式化冲突
    // #每次保存的时候将代码按eslint格式进行修复
    // 添加 vue 支持
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    }
  }

此文章是早期的草稿，仅供参考