前端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,具体配置参照官方网站

相关推荐
lecepin1 小时前
AI Coding 资讯 2025-09-17
前端·javascript·面试
IT_陈寒1 小时前
React 18实战:7个被低估的Hooks技巧让你的开发效率提升50%
前端·人工智能·后端
树上有只程序猿1 小时前
终于有人把数据库讲明白了
前端
猩兵哥哥2 小时前
前端面向对象设计原则运用 - 策略模式
前端·javascript·vue.js
司宸2 小时前
Prompt设计实战指南:三大模板与进阶技巧
前端
RoyLin2 小时前
TypeScript设计模式:抽象工厂模式
前端·后端·typescript
华仔啊2 小时前
Vue3+CSS 实现的 3D 卡片动画,让你的网页瞬间高大上
前端·css
江城开朗的豌豆2 小时前
解密React虚拟DOM:我的高效渲染秘诀 🚀
前端·javascript·react.js