vue代码规范的支持

打开vscode eslint

eslint

yarn add --dev eslint eslint-plugin-vue @typescript-eslint/parser @typescript-eslint/eslint-plugin

prettier

yarn add --dev prettier eslint-config-prettier eslint-plugin-prettier

.prettierrc.js

module.exports = {
    printWidth: 180, //一行的字符数，如果超过会进行换行，默认为80
    tabWidth: 4, //一个tab代表几个空格数，默认为80
    useTabs: false, //是否使用tab进行缩进，默认为false，表示用空格进行缩减
    singleQuote: true, //字符串是否使用单引号，默认为false，使用双引号
    semi: false, //行位是否使用分号，默认为true
    trailingComma: 'none', //是否使用尾逗号，有三个可选值"<none|es5|all>"
    bracketSpacing: true, //对象大括号直接是否有空格，默认为true，效果：{ foo: bar }
    jsxSingleQuote: true, // jsx语法中使用单引号
    endOfLine: 'auto'
}

.eslintrc.js

//.eslintrc.js
module.exports = {
    parser: 'vue-eslint-parser',
    parserOptions: {
        parser: '@typescript-eslint/parser', // Specifies the ESLint parser
        ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features
        sourceType: 'module', // Allows for the use of imports
        ecmaFeatures: {
            jsx: true
        }
    },
    extends: [
        'plugin:vue/vue3-recommended',
        'plugin:@typescript-eslint/recommended',
        'prettier',
        'plugin:prettier/recommended'
    ]
}

module.exports = {
    root: true, // 指定跟路径
    parserOptions: {
        parser: 'babel-eslint' // 解析器
    },
    env: {
        node: true,
        browser: true // 浏览器启用
    },
    extends: [
        // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
        // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
        'plugin:vue/essential', // vue基本规则
        // https://github.com/standard/standard/blob/master/docs/RULES-en.md
        '@vue/standard'
    ],
    // required to lint *.vue files
    plugins: [
        'vue' // 支持vue文件
    ],
    // add your custom rules here
    rules: {
        indent: ['error', 2], // 缩进宽度4个空格
        'comma-dangle': 'off', // 允许行末逗号
        'no-constant-condition': 'off', // 允许常量作为表达式条件
        'no-delete-var': 'off', // 允许使用delete
        'no-extend-native': 'off', // 允许扩展原生对象
        'no-floating-decimal': 'off', //  允许省去小数点前的0
        'no-multi-str': 'off', // 允许多行字符串
        semi: 'off', // 允许使用分号

        // allow async-await
        'generator-star-spacing': 'off', // 关闭
        // 最大长度 120
        'max-len': [
            'warn',
            {
                code: 180,
                ignoreComments: true,
                ignoreStrings: true,
                ignoreTemplateLiterals: true,
                ignoreUrls: true
            }
        ],
        // 最大行数 500
        'max-lines': [
            'warn',
            {
                max: 1000,
                skipBlankLines: true,
                skipComments: true
            }
        ],
        // 要求使用 let 或 const 而不是 var
        'no-var': [
            'error'
        ],
        // allow debugger during development
        'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
    }
}

.settings.json(工作区)

{
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        "vue",
        "typescript",
        "typescriptreact",
        "json"
    ]
}