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"