vue3项目 - Eslint 配置代码风格-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue3项目 - Eslint 配置代码风格。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

Eslint 自定义配置

总结：

Prettier （代码规范的插件，格式化）---> 美观

Eslint （规范、纠错、检验错误）-----> 纠错

首先，禁用 Prettier 插件，安装 ESLint 插件，配置保存时自动修复

再 配置代码风格文件 .eslintrc.cjs（Prettier 配置 + ESLint 配置，附配置代码）

配置内容如，

Prettier：单引号、无分号、每行宽度限制 80字符、不加对象/数组最后逗号、换行符号不限制（win mac不一样）

ESLint：vue组件名称多单词组成（忽略 index.vue）、props解构关闭、未定义变量错误提示

流程：

配置文件 .eslintrc.cjs 文件

vue3项目 - Eslint 配置代码风格,vue项目,笔记,前端,javascript,开发语言

配置代码如下：

rules: {
    // 前置
    // 1. 禁用格式化插件  prettier   format on save 关闭
    // 2. 安装Eslint插件，并配置保存时自动修复

    // prettier 专注于美观度
    'prettier/prettier': [
      'warn',
      {
        singleQuote: true, // 单引号
        semi: false, // 无分号
        printWidth: 80, // 每行宽度至多80字符
        trailingComma: 'none', // 不加对象|数组最后逗号
        endOfLine: 'auto' // 换行符号不限制（win mac 不一致）
      }
    ],

    // ESLint专注于规范，不符合规范 则报错
    'vue/multi-word-component-names': [
      'warn',
      {
        ignores: ['index'] // vue组件名称多单词组成（忽略index.vue / index.vue除外）
      }
    ],
    'vue/no-setup-props-destructure': ['off'], // 关闭 props 解构的校验（props解构丢失响应式）
    // 添加未定义变量错误提示，create-vue@3.6.3 关闭，这里加上是为了支持下一个章节演示
    'no-undef': 'error'
}

检查，禁用 Prettier 插件，采用 package.json 中的 prettier vue3项目 - Eslint 配置代码风格,vue项目,笔记,前端,javascript,开发语言

vue3项目 - Eslint 配置代码风格,vue项目,笔记,前端,javascript,开发语言

安装 ESLint 插件

vue3项目 - Eslint 配置代码风格,vue项目,笔记,前端,javascript,开发语言

在设置中，配置保存时自动修复，（不要开启默认的自动保存格式化）

vue3项目 - Eslint 配置代码风格,vue项目,笔记,前端,javascript,开发语言

保存时自动修复，代码如下

    // 二则冲突。可以达成vue2和vue3的统一
    // ESlint插件 + Vscode配置 实现自动格式化修复
    "editor.codeActionsOnSave": {
        "source.fixAll": true
    },
    // 关闭保存自动格式化
    "editor.formatOnSave": false,

此时，保存可自动根据规范进行代码修复。文章来源地址https://www.toymoban.com/news/detail-765792.html

到了这里，关于vue3项目 - Eslint 配置代码风格的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！