1.全局装eslint

npm install -g eslint

2.安装vue-eslint-plugin

参考: https://eslint.vuejs.org/user-guide/#installation

3.配置eslint

根目录新建 .eslintrc.js,基本eslint配置可自行配置,此文件为示例。

module.exports = {
    extends: [
        // add more generic rulesets here, such as:
        // 'eslint:recommended',
        //   'plugin:vue/vue3-recommended',
        'plugin:vue/recommended' // Use this if you are using Vue.js 2.x.
    ],
    rules: {
        // override/add rules settings here, such as:
        // 'vue/no-unused-vars': 'error',
        "indent": ['error', 4],
        "vue/html-indent": ["error", 4, {
            "attribute": 1,
            "baseIndent": 1,
            "closeBracket": 0,
            "alignAttributesVertically": true,
            "ignores": []
        }]
    }
}

4.配置editorConfig

根目录新建 .editorconfig

root = true
[*]
indent_style = space
indent_size = 4
insert_final_newline = true

如果vscode有vertor插件,需要修改插件缩进配置为4;

"vetur.format.options.tabSize": 4

5.开启eslint

确保eslint是开启状态