vue3 门户网站搭建7-eslint

为了方便阅读和维护，代码规范还是有必要的

1、安装：npm i eslint --save-dev

2、配置 .eslintrc.cjs 文件，增加 rules：

rules: {

        'semi': ['warn', 'always'], // 分号结尾

        'no-console': 'warn', // 禁止 console

        'no-use-before-define': 0, // 禁止在变量定义之前使用

        'no-unused-vars': 0, // 禁止出现使用未使用变量

        'indent': ['warn', 4], // 使用一致的缩进

        'eqeqeq': [1], // 要求使用 === 和 !==

        'object-curly-spacing': ['warn', 'always'], // 对象 {} 两侧空格

        'vue/multi-word-component-names': 'off', // 命名规范

        "space-infix-ops": ["warn", { "int32Hint": false }], // 操作符空格 a + b

        "comma-spacing": ["warn", { "before": false, "after": true }], // 逗号后空格

        "arrow-spacing": ["warn", { "before": true, "after": true }], // 箭头函数两侧空格

        "key-spacing": ["warn", { "beforeColon": false,  "afterColon": true }], // key value中间的空格

        'no-empty-function': 'warn',         // 禁止出现空的函数块

        'no-multi-spaces': 'warn',           // 禁止使用多个空格

        'no-multiple-empty-lines': 'warn',   // 禁止出现多行空行

        'no-trailing-spaces': 'warn',        // 禁止一行结束后面不要有空格

        'no-var': 'warn',                    // 禁止出现var用let和const代替

        'quotes': ['warn', 'single', 'avoid-escape'],      // 要求统一使用单引号符号

}

3、因为我这里还额外增加了 prettier（@vue/eslint-config-prettier），为了防止规则冲突，还需要配置一下 .prettierrc.json：

{

  "tabWidth": 4,

  "semi": true,

  "singleQuote": true,

  "useTabs": false,

  "bracketSpacing": true,

  "arrowParens": "avoid",

  "htmlWhitespaceSensitivity": "ignore"

}

4、配置不需要校验的文件，.eslintignore：

.idea

.vscode

dist

mock

node_modules

public

注：如果有 ESLint: Delete `␍`(prettier/prettier) 的问题，则需要 .prettierrc.json 增加配置（系统平台不一致，对换行处理有区别）：

"endOfLine": "auto"

巴特西

vue3 门户网站搭建7-eslint

最新文章

热门文章