Warren's

eslint 相关的配置说明

  • 不校验某个文件，文件顶部加 <!-- eslint-disable -->; 不校验当前行 // eslint-disable-line
  • ts 文件中 // @ts-ignore

安装

地址open in new window

  1. npm init @eslint/config 已经有配置文件可以直接安装 yarn add eslint 这里配置的结果是校验 vue3 的语法

选择了 enforce code style 会多装几个包，处理代码格式 选择 airbnd 会校验更严格 eslint-config-standard | eslint-config-airbnb-base eslint-plugin-import eslint-plugin-n eslint-plugin-promise 同时会多出一个配置 extends: ['airbnb-base'|standard] 初始化的 vue3+vite 项目装 airbnb eslint 不生效（待验证什么原因）

如果要降级 vue2 语法校验，可以将 .eslintrc.js 中的 extends 下的 plugin:vue/vue3-essential 改为 plugin:vue/recommended 参考: https://eslint.vuejs.org/user-guide/

要为特定类型的文件指定处理器，请使用 overrides 键和 processor https://eslint.bootcss.com/docs/user-guide/configuring

安装 vscode 插件

  • 【ESLint】 插件配置 https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint#settings-options 创建 .eslintrc.js

  • 【EditorConfig for VS Code】: 该插件与 eslint 可以做部分配合工作 设置代码规范 配置 .editorconfig 文件

# 设为true时，才会停止查找.editorconfig文件
root = true

[*]
charset = utf-8

[*.{js,cjs,vue,json}]
indent_style = space
indent_size = 4
trim_trailing_whitespace = true
end_of_line = crlf
insert_final_newline = true

# indent_style    设置缩进风格(tab是硬缩进，space为软缩进)
# indent_size     用一个整数定义的列数来设置缩进的宽度，如果indent_style为tab，则此属性默认为tab_width
# tab_width       用一个整数来设置tab缩进的列数。默认是indent_size
# end_of_line     设置换行符，值为lf、cr和crlf
# charset         设置编码，值为latin1、utf-8、utf-8-bom、utf-16be和utf-16le，不建议使用utf-8-bom
# trim_trailing_whitespace  设为true表示会去除换行行首的任意空白字符。
# insert_final_newline      设为true表示使文件以一个空白行结尾

vscode 插件和 npm 包差异

vscode 安装的 eslint 和 prettier 插件，如果项目中有配置文件，会读取配置文件，然后检查代码格式化文件

npm 安装的包，只有运行命令行的时候检查代码 在命令行给出提示，如果只安装了 npm 包，vscode 是不会有提示的

忽略的文件 .eslintignore 参考 .gitignore

  • .eslintrc.js 文件 或其它的配置文件
module.exports = {
    env: {
        node: true // 使用 require 和 module.exports 不会报错
    },
    rules: {
        /*
            'off'：0  'warn'：1 'error'：2
        */
        // ts any 的使用 Unexpected any. Specify a different type
        '@typescript-eslint/no-explicit-any': ['off'],
        // 允许使用console
        'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
        'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
        indent: [
            'error',
            4 // 结合 editorconfig
        ],
        // https://eslint.org/docs/latest/rules/comma-dangle
        // 当最后一个元素或属性与结尾的 ]或 } 在不同行时，需要使用逗号，当最后一个元素或属性与结尾的 ]或 } 在同一行时，不允许使用逗号。
        'comma-dangle': ['error', 'always-multiline'],
        'no-tabs': 'off' // Unexpected tab character
        /* 官方文档说不推荐，目前还能用 20231228 */
        'max-len': ['error', { code: 160 }],
        /* 最大行数 */
        'max-lines': ['error', { max: 600, skipBlankLines: true, skipComments: true }],
        // 即使没有 babelrc 配置文件，也使用 babel-eslint 来解析
        requireConfigFile: false,
        quotes: ['error', 'single'], // 单引号
        semi: ['error', 'never'], // 分号
        'quote-props': [2, 'as-needed'], // 对象属性，根据需要添加引号 如 'zz-xxx' zzXxx
        // 关闭校验 Promise.reject() 传入的是 error https://eslint.org/docs/latest/rules/prefer-promise-reject-errors
        'prefer-promise-reject-errors': ['off'],

        /**
         * eslint 针对vue的插件*( eslint-plugin-vue ) 可以配置一些校验规则 https://eslint.vuejs.org/
         */
        // 配置 Parsing error: x-invalid-end-tag  其它相关的查阅 https://eslint.vuejs.org/rules/no-parsing-error.html
        'vue/no-parsing-error': ['error', {
            'x-invalid-namespace': false
        }],
        // 当报错 Component name should always be multi-word 时设置
        'vue/multi-word-component-names': 0,
        'vue/max-attributes-per-line': ['error', {
            'singleline': {
                'max': 12,
            },
            'multiline': {
                'max': 1,
            }
        }], // 属性换行配置
        // html 缩进 这里是4个空格
        'vue/html-indent': ['error', 4, {
            baseIndent: 1,
        }],
        // html 文件组后一行报错；实际官方用途 令 <template> 内也支持 ESLint 的注释指令。
        'vue/comment-directive': 'off',
        /* 属性是否用 - 连接, 可以加 ignore  https://eslint.vuejs.org/rules/attribute-hyphenation.html */
        "vue/attribute-hyphenation": ["error", "never", {
            "ignore": []
        }],
        /* 定义 vue 文件中 template scritpt style 模块的顺序 */
        "vue/block-order": ["error", {
            "order": ["template", "script", "style"]
        }],
        /* 组件名称必须是 多个单词 */
        'vue/multi-word-component-names': ['error', {
            ignores: [],
        }],

        'prettier/prettier': 2 // 将 prettier 的报错信息提示改为 error 级别
    },
    // 允许一些全局的变量，如在html中引入的高德地图全局变量
    globals: {
        AMap: true,
        Vue: true,
        VueRouter: true,
        ELEMENT: true,
        AMapUI: true
    }
}

prettier

由于最新官网推荐 用命令来格式化所有文件 所以暂时不推荐用 https://github.com/vuejs/eslint-config-prettier 【20231221】

  • vscode 需要装插件 Prettier- Code forematter

  • eslint 更注重于语法，prettier 更关注于格式

  • Prettier 是一个代码格式化工具，可以格式化代码，但不具备代码检查功能

  • prettier3.7 以上会优先读取项目根目录下的 .editorconfig or prettier config 如果有，不会使用 vscode setting 中的设置

  • 如果项目中有 .prettierrc 文件 VSCode 的 prettier 插件的配置将失效

配置

.prettierrc.json https://www.prettier.cn/docs/options.html

{
  /* https://www.prettier.cn/docs/options.html#arrow-function-parentheses */
  /* 默认 80 单行长度 */
  "printWidth": 110,
  /* 默认 always (x) => x */
  "arrowParens": "always",
  /* 默认 fasle  html 标签 首标签的结尾 > 不用换行 */
  "bracketSameLine": false,
  /* 默认 true  { name: 'hew' } 对象花括号内部前后添加空格 */
  "bracketSpacing": true,
  /* 默认 lf 换行符  lf crlf cr auto */
  "endOfLine": "lf",
  /* 默认 false JSX 中用 单引号 */
  "jsxSingleQuote": true,
  /* 默认 as-needed 对象字段是否用 引号，默认是该用的时候就用 */
  "quoteProps": "as-needed",
  /* 默认 true 行尾是否需要分号 */
  "semi": false,
  /* 默认 false 一个属性必须单独占一行 */
  "singleAttributePerLine": true,
  /* 默认 false 是否使用单引号 */
  "singleQuote": true,
  /* 默认 false  关闭 tab 缩进 */
  "useTabs": false,
  /* 默认 2 使用2个space缩进 */
  "tabWidth": 4,
  /* 默认 all 结尾逗号 es5 表示有效的 逗号*/
  "trailingComma": "all",
  /* 默认 false  vue 文件中 是否缩进 style 和 script */
  "vueIndentScriptAndStyle": false,
  /* 默认 false  jsx 标签的 > 是否需要换行 */
  "jsxBracketSameLine": false,
  /* 默认 false 不用在顶部加注释即可格式化 @prettier 或者 @format */
  "requirePragma": false,
  /* 默认 false 当文件被格式化后，在顶部生成 @format 标记 */
  "insertPragma": false,
  /* 默认 css HTML文件的全局空白区域，默认是按照 css 属性识别即可 */
  "htmlWhitespaceSensitivity": "css",

  /* 默认 -1 格式化后 光标移动到哪里 */
  "cursorOffset": -1,
  /* 默认 auto 是否对嵌入的代码格式化 */
  "embeddedLanguageFormatting": "auto",
  /* 默认 ‘’ 指定用什么解析器 一般不用于配置文件 */
  "filepath": "",
  /* 默认 会自动识别文件 然后解析 所以不用修改， 常规的语言都基本支持 */
  "parser": "",
  /* 默认 preserve 段落文本 是否换行，默认是不处理 */
  "proseWrap": "preserve",
  /* 每个文件的格式化范围 */
  "rangeStart": 0,
  /* 每个文件的格式化范围 */
  "rangeEnd": null
}

Prettier 和 Eslint 结合使用

根据脚手架搭建时，选择两者初始化安装

编辑器 安装对应的插件

Last Updated:
Contributors: Warren