vue3项目 - Eslint 配置代码风格

Eslint 自定义配置

总结:

Prettier (代码规范的插件,格式化 )---> 美观

Eslint (规范、纠错、检验错误 )-----> 纠错

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

配置代码风格文件 .eslintrc.cjs (Prettier 配置 + ESLint 配置,附配置代码

配置内容 如,

  • Prettier:单引号、无分号、每行宽度限制 80字符、不加对象/数组最后逗号、换行符号不限制(win mac不一样)
  • ESLint:vue组件名称多单词组成(忽略 index.vue)、props解构关闭、未定义变量错误提示

流程:

配置文件 .eslintrc.cjs 文件

配置代码如下:

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

安装 ESLint 插件

在设置中,配置保存时自动修复,(不要开启默认的自动保存格式化)

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

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

此时,保存 可自动根据规范 进行代码修复。

相关推荐
苦夏木禾3 分钟前
js请求避免缓存的三种方式
开发语言·javascript·缓存
超级土豆粉11 分钟前
Turndown.js: 优雅地将 HTML 转换为 Markdown
开发语言·javascript·html
秃了也弱了。18 分钟前
Chrome谷歌浏览器插件ModHeader,修改请求头,开发神器
前端·chrome
乆夨(jiuze)38 分钟前
记录H5内嵌到flutter App的一个问题,引发后面使用fastClick,引发后面input输入框单击无效问题。。。
前端·javascript·vue.js
忧郁的蛋~1 小时前
HTML表格导出为Excel文件的实现方案
前端·html·excel
小彭努力中1 小时前
141.在 Vue 3 中使用 OpenLayers Link 交互:把地图中心点 / 缩放级别 / 旋转角度实时写进 URL,并同步解析显示
前端·javascript·vue.js·交互
wei_shuo1 小时前
飞算 JavaAI 开发助手:深度学习驱动下的 Java 全链路智能开发新范式
java·开发语言·飞算javaai
熊猫钓鱼>_>1 小时前
用Python解锁图像处理之力:从基础到智能应用的深度探索
开发语言·图像处理·python
然我1 小时前
别再只用 base64!HTML5 的 Blob 才是二进制处理的王者,面试常考
前端·面试·html
NanLing1 小时前
【纯前端推理】纯端侧 AI 对象检测:用浏览器就能跑的深度学习模型
前端