前端eslint及格式化配置指南

前言

前端代码规范如今已和eslint密不可分,尤其对于大型项目而言,代码统一规范显得尤为重要!本文主要讲述前端eslint常用配置(vue、react)及vscode自动代码格式化配置,欢迎各路大神评论指正!

正文

1 配置说明由浅入深

1.1 eslint生成配置文件

eslint官方网站以及提供了npm包自动生成不同项目的eslint配置,不论你的代码风格是vue、react还是js、ts都能实现,并且针对不同的选择提供了不同的父级规则模板供选择,这么便利的工具有什么理由不使用呢?盘它就对了!奉上eslint官网链接, :point_left: 快去学习一下吧!

执行 npm init @eslint/config后按照傻瓜式指引即可

1.2 推荐公用校验规则

eslint官方以及模板提供的代码校验规则已经涵盖了大多数场景,但是仍不完善,如单双引号问题、单行最大字符数控制以及末尾分号控制等,需要编写独立校验规则覆盖已有规则,现奉献本人整理的常用规则如下:

js 复制代码
const isDevelopment = true

// https://eslint.org/docs/latest/rules
const rules = {
    // 允许单文件没有默认导出
    // https://github.com/import-js/eslint-plugin-import/blob/v2.29.1/docs/rules/prefer-default-export.md
    'import/prefer-default-export': [
        'off', // 'off' | 'warn' | 'error'
        { target: 'any' }, // default is "single", 'single' | 'any'
      ],
      // 换行符为windows
      // https://eslint.org/docs/latest/rules/linebreak-style#options
      'linebreak-style': ['off', 'windows'], // unix \n windows \n\r vscode 右下角 End of line sequece 可切换换行符
      // 禁止结尾分号
      // https://eslint.org/docs/latest/rules/semi#options
      semi: ['error', 'never'],
      // 不允许空代码块,允许空catch
      // https://eslint.org/docs/latest/rules/no-empty
      'no-empty': ['error', { allowEmptyCatch: true }],
      // 开发模式下允许console生产不允许
      //  https://eslint.org/docs/latest/rules/no-console
      'no-console': [isDevelopment ? 'off' : 'error'], // off / error { allow: ["warn", "error"] }
      // 箭头函数单个参数可以没有括号
      // https://eslint.org/docs/latest/rules/arrow-parens#rule-details
      'arrow-parens': ['error', 'as-needed'],
      // 单行不能超过80个字符
      // https://eslint.org/docs/latest/rules/max-len#rule-details
      'max-len': ['error', { code: 80 }],
}

module.exports = rules
1.3 添加ts校验规则

参照大神整理的

1.4 添加vue校验规则

安装相关依赖 npm install --save-dev eslint-plugin-vue

(1)vue2

json 复制代码
// 在.eslintrc.js中加入
"extends": [
    ...
    "plugin:vue/essential"
],
"plugins": [
       "vue"
],

(1)vue3

json 复制代码
// 在.eslintrc.js中加入
"extends": [
    ...
    "plugin:vue/vue3-essential"
],
"plugins": [
       "vue"
],
1.5 添加react校验规则

安装相关依赖 npm install --save-dev eslint-plugin-react

json 复制代码
// 在.eslintrc.js中加入
"extends": [
    ...
    "plugin:react/recommended"
],
"plugins": [
       "react"
],

2 vscode保存格式化配置

以上对校验规则以及如何配置作了详细说明,本节介绍如何配置vscode按照改规则进行代码格式化。

(1)安装vscode指定插件 eslint

(2)修改vscode用户配置如下:

erlang 复制代码
...
"eslint.format.enable": true,
"editor.defaultFormatter": "dbaeumer.vscode-eslint",
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
},
"eslint.validate": [
    "javascript",
    "javescriptreact",
    "vue",
    "html"
]
...

(3)重启vscode应用配置,编写代码测试效果

注意:如果遇到eslint某些代码无法被格式化的情况,可采用其他格式化工具如vetur、prettier等进行格式化再保存。

3 设置程序开发模式下运行eslint校验

在开发模式下进行eslint校验,可以有效的规避大多数代码不规范问题。与git hook不同,开发模式下可实时对不规范的代码进行反馈,保证代码整体质量。以webpack4+vue2.x为例,需要修改配置文件如下:

js 复制代码
// webpack.config.js
...
module: {
    rules: [
      {
         test: /\.(js|vue)$/,
         laoder: 'eslint-loader',
         enforece: 'pre',
         include: [path.resolve('src')],
         options: [
            formatter: require('eslint-friendly-formatter')
         ]  
      }
    ]
}
...

vue3采用eslint-plugin-vue,具体配置参照官方网站

相关推荐
用户268001379194 分钟前
有哪些高效的Python库可以用于解析淘宝评论的JSON数据?
前端·api
brzhang7 分钟前
A Definition of AGI:用人的智力模型去量 AI,这事靠谱吗?
前端·后端·架构
一 乐8 分钟前
宠物管理|宠物店管理|基于SSM+vue的宠物店管理系统(源码+数据库+文档)
java·前端·数据库·vue.js·论文·毕设·宠物
咖啡の猫19 分钟前
Vue插件
前端·javascript·vue.js
韩劳模20 分钟前
Canvas、SVG实现不规则区域高亮的方案说明
前端
技术爬爬虾33 分钟前
AI编程新王Codex详细攻略,一期视频精通,附免费使用方法
程序员·github
张可爱37 分钟前
20251026-从网页 Console 到 Python 爬虫:一次 B 站字幕自动抓取的实践与复盘
前端·python
咖啡の猫1 小时前
Vue中的自定义事件
前端·javascript·vue.js
scilwb1 小时前
STM32 实战:驯服失控的 M3508 电机 - PID 位置环频率的“坑”与“药”
算法·代码规范