学不动系列-eslint

ESLint

介绍在最简单的项目使用eslint,包括eslint的vscode插件的使用,自动化格式代码,自动化修复代码,和webpack,vite的配合使用

单独使用

第一步:构建一个空项目

  • npm init -y
  • 在根目录新建文件./src/app.js,用于测试eslint是否生效
js 复制代码
console.log('Hello World')

eslint是用来扫描我们所写的代码是否符合规范的工具。严格意义上来说, eslint配置跟webpack无关,但在工程化开发环境中,它往往是不可或缺的。

第二步:通过pnpm安装eslint依赖

pnpm i eslint -D

第三步:初始化eslint

只需要在根目录下添加一个.eslintrc文件(或者.eslintrc.json,.js等)。当然,我们可以使用eslint工具来自动生成它:

python 复制代码
npx eslint --init

通过上面的选项,根目录下自动生成了配置文件.eslintrc.js

javascript 复制代码
//.eslintrc.js
module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: 'airbnb-base',
  overrides: [
    {
      env: {
        node: true,
      },
      files: [
        '.eslintrc.{js,cjs}',
      ],
      parserOptions: {
        sourceType: 'script',
      },
    },
  ],
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
  },
  rules: {
  },
};

并生成了一个配置文件(.eslintrc.js),这样我们就完成了eslint的基本规则配置。eslint配置文件里的配置项含义如下:

  1. env :指定脚本的运行环境。每种环境都有一组特定的预定义全局变量。此处使用的 browser预定义了浏览器

    环境中的全局变量,es6启用除了modules 以外的所有ECMAScript 6特性(该选项会自动设置ecmaVersion解析器选项为6)。

  2. globals:脚本在执行期间访问的额外的全局变量。也就是env环境中中未预定义,但我们又需要使用的全局变量

  3. extends:扩展,检测中使用的预定义的规则集合。

  4. rules: 启用的规则及其各自的错误级别,会合并extends中的同名规则,定义冲突时优先级更高。

  5. parserOotions:ESLint允许你指定你想要支持的JavaScript 语言选项。

    ecmaFeatures 是个对象,表示你想使用的额外的语言特性,这里 jsx代表启用JSX

    ecmaVersion用来指定支持的ECMAScript版本。默认为5,即仅支持es5,你可以使用6、7、8、9或10来指定你想要使用的ECMAScript 版本。你也可以用使用年份命名的版本号指定为2015(同6) ,2016(同7),或2017(同8)或2018(同9)或2019(same as 10)。上面的env中启用了es6,自动设置了ecmaVersion解析器选项为6。

    plugins:是一个npm包,通常输出eslint 内部未定义的规则实现。rules和extends中定义的规则,并不都在eslint内部中有实现。比如 extends中的plugin:react/recommended,其中定义了规则开关和等级,但是这些规则如何生效的逻辑是在其对应的件'react'中实现的。

检查文件是否有错误

shell 复制代码
npx eslint ./src

可以看到上图所示:出现了3个问题

  1. console没有定义
  2. error 没有在结尾新建一行
  3. error 缺少分号

解决问题一:

  • 在配置文件.eslintrc.js的rules中配置 "no-console":0//0表示关闭
  • 再次通过npm的npx工具去执行eslint命令检查文件app.js
shell 复制代码
npx eslint ./src

其他的也是类似的解决二方法,这样每次修复问题都需要执行npx eslint ./src命令,不符合程序员懒的本质,所以可以安装vscode的eslint插件。

第四步:安装vscode的eslint插件

方便在编码过程中及时发现代码问题

安装完eslint插件后,需要在根目录下新建.vscode文件夹,新建文件settings.json,内容如下

json 复制代码
{
    "eslint.enable": true//开启eslint检测
}

保存后,发现eslint插件检测代码生效

配合vite

TODO

配合webpack

==TODO ==

相关推荐
y先森2 小时前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy2 小时前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu10830189112 小时前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
IT女孩儿3 小时前
CSS查缺补漏(补充上一条)
前端·css
吃杠碰小鸡4 小时前
commitlint校验git提交信息
前端
虾球xz5 小时前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇5 小时前
HTML常用表格与标签
前端·html
疯狂的沙粒5 小时前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript
小镇程序员5 小时前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js
野槐5 小时前
前端图像处理(一)
前端