eslint代码自动格式化

1. package.json 安装eslint依赖包：**

npm install eslint --save-dev

**
2. vscode安装eslint扩展
3. 添加.eslintrc.js文件:

module.exports = {
    root: true,
    env: {
        browser: true,
        node: true,
        es6: true
    },
    'extends': [
        'eslint:recommended',
        'plugin:vue/recommended',
        // '@vue/standard',
        '@vue/typescript'
        // "@vue/prettier",
        // "@vue/prettier/@typescript-eslint"
    ],
    parserOptions: {
        parser: '@typescript-eslint/parser',
        // ecmaVersion: 2020,
        sourceType: 'module'
    },
    plugins: ['vue'],
    rules: {
        'no-debugger': 'off',
        'space-before-function-paren': [2, 'never'],
        'vue/array-bracket-spacing': 'error',
        'vue/arrow-spacing': 'error',
        'vue/block-spacing': 'error',
        'vue/brace-style': 'error',
        'vue/camelcase': 'error',
        'vue/comma-dangle': 'error',
        'vue/component-name-in-template-casing': 'error',
        'vue/eqeqeq': 'error',
        'vue/key-spacing': 'error',
        'vue/match-component-file-name': 'error',
        'vue/object-curly-spacing': 'error',
        'semi': ['error', 'always'],
        'indent': ['error', 4, {
            SwitchCase: 1
        }],
        // -------------
        'no-irregular-whitespace': 'off',
        'vue/this-in-template': 'off',
        'vue/no-v-html': 'off',
        'no-return-assign': 'off',
        'no-fallthrough': 'off',
        'no-new': 'off',
        'no-mixed-operators': 'off',
        'vue/no-template-shadow': 'off',
        'promise/param-names': 'off',
        'no-tabs': 'off',
        'vue/max-attributes-per-line': ['error', {
            'singleline': 5,
            'multiline': {
                'max': 5,
                'allowFirstLine': true
            }
        }],
        'vue/html-closing-bracket-newline': ['error', {
            'singleline': 'never',
            'multiline': 'always'
        }],
        'vue/html-indent': ['error', 4, {
            'attribute': 1,
            'baseIndent': 1,
            'closeBracket': 0,
            'alignAttributesVertically': true,
            'ignores': []
        }],
        'vue/singleline-html-element-content-newline': ['error', {
            'ignoreWhenNoAttributes': false,
            'ignoreWhenEmpty': true,
            'ignores': ['pre', 'textarea', 'span', 'label', 'em', 'el-radio', 'el-button', 'el-col', 'el-breadcrumb-item', 'th', 'td']
        }],
        'vue/html-self-closing': ['error', {
            'html': {
                'void': 'never',
                'normal': 'never',
                'component': 'never'
            },
            'svg': 'always',
            'math': 'always'
        }],
        'no-prototype-builtins': 'off',
        'no-extra-boolean-cast': 'off',
        'no-useless-catch': 'off',
        'quotes': ['error', 'single']
    }
};

    4. vscode设置文件进行配置，配置文件:

{
    "editor.tabSize": 4,
    "window.zoomLevel": 0,
    "workbench.startupEditor": "welcomePage",
    "tslint.autoFixOnSave": true,
    "typescript.updateImportsOnFileMove.enabled": "always",
    "eslint.format.enable": true,
    "git.enableSmartCommit": true,
    "window.title": "${dirty}${rootName}${separator}${activeEditorLong}${separator}",
    "vetur.format.options.tabSize": 4,
    "editor.formatOnSave": true,
    "eslint.codeAction.showDocumentation": {
        "enable": true
    },
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    "javascript.updateImportsOnFileMove.enabled": "always",
    "explorer.confirmDragAndDrop": false,
    "explorer.confirmDelete": false,
    "terminal.integrated.defaultProfile.windows": "bash",
    "terminal.integrated.profiles.windows": {
        "PowerShell": {
            "source": "PowerShell",
            "icon": "terminal-powershell"
        },
        "Command Prompt": {
            "path": [
                "${env:windir}\\Sysnative\\cmd.exe",
                "${env:windir}\\System32\\cmd.exe"
            ],
            "args": [],
            "icon": "terminal-cmd"
        },
        "Git Bash": {
            "source": "Git Bash"
        },
        "C:\\Program Files\\Git\\bin\\bash.exe (migrated)": {
            "path": "E:\\Git\\bin\\bash.exe",
            "args": []
        },
        "Windows PowerShell": {
            "path": "C:\\WINDOWS\\System32\\WindowsPowerShell\\v1.0\\powershell.exe"
        },
        "bash": {
            "path": "E:\\Git\\bin\\bash.exe",
            "args": []
        }
    },
    "security.workspace.trust.untrustedFiles": "open",
    "git.autofetch": true,
    "git.confirmSync": false,
    /* styl相关 */
    "stylusSupremacy.insertColons": false, // 是否插入冒号
    "stylusSupremacy.insertSemicolons": false, // 是否插入分号
    "stylusSupremacy.insertBraces": false, // 是否插入大括号
    "stylusSupremacy.insertNewLineAroundBlocks": false, // 两个选择器中是否换行
}

5.以上步骤完成便成功了！