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

相关推荐
sdgsdgdsgc11 分钟前
Next.js企业级应用开发:SSR、ISR与性能监控方案
开发语言·前端·javascript
哲此一生98412 分钟前
搭建Vue3工程(去除不必要的文件)
前端·javascript·vue.js
黑云压城After3 小时前
H5使用环信实现视频或语音通话
前端·javascript·vue.js
未来之窗软件服务5 小时前
自己写算法(九)网页数字动画函数——东方仙盟化神期
前端·javascript·算法·仙盟创梦ide·东方仙盟·东方仙盟算法
你的人类朋友5 小时前
什么是断言?
前端·后端·安全
FIN66686 小时前
昂瑞微:实现精准突破,攻坚射频“卡脖子”难题
前端·人工智能·安全·前端框架·信息与通信
椎4956 小时前
苍穹外卖前端nginx错误之一解决
运维·前端·nginx
@。1246 小时前
对于灰度发布(金丝雀发布)的了解
开发语言·前端
我有一棵树6 小时前
前端图片加载失败、 img 出现裂图的原因全解析
前端
FIN66686 小时前
昂瑞微冲刺科创板:硬科技与资本市场的双向奔赴
前端·人工智能·科技·前端框架·智能