学习
实践
活动
专区
工具
TVP
写文章
专栏首页方球eslint 从0到1

eslint 从0到1

简介

ESlint 可组装的javaScript和JSX检查工具, 提供一个插件化的javascript代码检测工具。

背景

平常开发中,难免出现笔误,书写不规范,多人开发代码风格迥异等问题。给代码留下难以察觉的问题, 此时就需要 eslint 这类代码检查工具,规范我们的代码。

  • eslint 版本7.29.0

DEMO目录

  • .eslintrc.js
  • .eslintignore
  • src
    • index.ts

安装

// 全局安装
npm i -g eslint
// 本地安装,本地安装无法使用eslint命令
npm i -D eslint

初始化

eslint --init
// or
npx eslint --init

image.png

image.png

image.png

image.png

image.png

image.png

根据命令行提示, 选择适合我们项目的eslint基础配置。将在目录下生成 。.eslintrc.* 配置文件。

设置package.json

{
  "script": {
    // 指定校验的目录, 如果全局安装eslint,也可直接调用, eslint ./src
    "eslint": "eslint ./src" 
  }
}

现在可以调用yarn eslint 查看校验结果。

常用命令行

  • -c 指定配置文件
  • -- env 指定环境
  • --rule 指定规则
  • -- fix 是自动否修复错误

其他

.eslintrc.* 配置文件

通过配置文件控制文件校验的规则。

基础配置项

  • env 指定包或项目的运行环境

针对不同的允许环境,存在不同的全局变量, 例如 浏览器中的 window, node 中的 process.env 等。 设置准确的环境,便于eslint 正确查询变量来源

{
    "env": {
        "browser": true, // 支持浏览器环境
        "node": true // 支持 node 环境
    }
}
  • parserOptions 编译选项

设置需要支持的语言类型或模式

{
  "parserOptions": {
        "ecmaVersion": 6, // 需要支持的ECMAScript 版本 
        "sourceType": "module", // 模块类型
        "ecmaFeatures": { // 其他语言特性
            "jsx": true, // 支持 jsx
            "globalReturn": false, // 全局作用域下使用 return
             ...
        }
   },
}
  • rules 校验规则

通过为规则设置不同的等级或值,控制我们需要校验的语法或代码格式。

{
    'semi': 'off', // 关闭分号结尾
    'no-unused-vars' 'warn', // 未使用变量,警告提示
    'no-undef': 'error', // 未定义或隐式全局变量, 报错提示
    'linebreak-style': ['error', 'windows'], // 使用windows 换行符号, 否者报错。  通过数据设置规则详细属性
}

rules 等级值设置方式

    • 'off' | 0 禁用该规则
    • 'warn' | 1 不符合规则时,警告提示
    • 'error' | 2 不符合规则时, 报错提示

rules 属性设置 [规则等级值, 规则属性值] 例如:

lines-around-comment: ["error", { "beforeLineComment": true }],
'space-before-blocks': ['error', 'never'],
  • globals 全局变量

该属性允许我们设置自定义全局变量。

{
  globals: {
    'version': 'readonly', // 添加全局版本号,且该值为只读
     'globalCache': 'writable' // 添加全局缓存,且该值可读写
  }
}
  • extends 规则配置继承

允许我们继承其他eslint 配置规则文件或npm规则包, 例如: eslint-config-airbnb 一般独立eslint 规则包都以eslint-config 为包前缀, 实际配置时可省略

 "extends": [
    "eslint:recommended", // eslint: 扩展规则设置, 并设置为推荐。 
    "plugin:@typescript-eslint/recommended", // plugin: 导入插件内的规则文件, 这里表示, 查询插件 @typescript-eslint, 并导入规则文件 recommended
    "@vue/airbnb", // 规则包, 等价于 @vue/eslint-config-airbnb, @vue 为包集合目录
    "./node_modules/coding-standard/eslintDefaults.js", // 指定具体规则文件目录
  ]
  • plugins 插件

插件一般用来扩展新的校验规则,例如: @typescript-eslint 新增 ts 的语法校验规则

"plugins": [
    "@typescript-eslint"
  ],

进阶配置项

  • parser 指定解析器

如何解析js代码

{
  "parser": "esprima"
}
  • processor 处理器

从其他类型文件中提取或转换 js 代码

{
   "processor": "a-plugin/a-processor"
}
  • settings 共享设置

该设置将作用于所有规则

{
    "settings": {
        "sharedData": "Hello"
    }
}
  • overrides 针对不同文件的独立配置

某些情况下, 我们需要针对不同类型的文件设置不同的校验规则, 就可以用改该属性

 overrides: [
    {
      files: [
       // 为测试文件设置 jest 环境
        '**/__tests__/*.{j,t}s?(x)',
        '**/tests/unit/**/*.spec.{j,t}s?(x)',
      ],
      env: {
        jest: true,
      },
    },
  ]
  • root 是否停止向上查询
{
  root: true // 停止向父级目录中寻找配置文件
}

层叠配置, 配置优先级

  • 默认 eslint 将遍历目录内的配置文件直到根目录, 更具目录层级,使用多个配置的合集。 距离目标文件越近的配置,优先级越高。 例如 子目录 > 父目录 > 根目录。
  • 如果同级目录下存在 package.json, .eslintrc.* , package.json 内的配置将被忽略
  • 可通过配置属性root 修改层叠规则

eslintignore 忽略文件

某些目录或文件不要做校验时,可在在目录下新增.eslintignore 文件 , 写入需要忽略的目录或文件

// .eslintignore
node_modules/
dist/
lib/
bin/

eslint 规则注释

有的情况下, 我们需要针对具体的代码指定规则。例如: 忽略部分为暂时未使用的变量。 这里可以使用规则注释

/* eslint-disable */ 忽略当前文件, 既不对该文件做


/* eslint-disable no-alert, no-console */ 禁用指定规则


// 禁用单行 
alert('foo'); // eslint-disable-line


// eslint-disable-next-line
alert('foo');


alert('foo'); // eslint-disable-line no-alert

vscode eslint 配置

VSCode合理配置ESLint+Prettier

本文参与 腾讯云自媒体分享计划 ,欢迎热爱写作的你一起参与!
本文分享自作者个人站点/博客:https://www.jianshu.com/u/d25c5e90b4ab复制
如有侵权,请联系 cloudcommunity@tencent.com 删除。
登录 后参与评论
0 条评论

相关文章

  • 从0到1开发一个简单的 eslint 插件

    总结:无论你使用那种解析器,本质是都是为了将code转换为ESLint能够阅读的语言ESTree?

    树酱
  • Kubernetes 从0到1

    Kubernetes,又称为 k8s(首字母为 k、首字母与尾字母之间有 8 个字符、尾字母为 s,所以简称 k8s)或者简称为 “kube” ,是一种可自动实...

    heidsoft
  • fastjson从0到1

    红队蓝军
  • shiro从0到1

    https://codeload.github.com/apache/shiro/zip/shiro-root-1.2.4

    红队蓝军
  • rollup从0到1

    开发基于 typescript ES6 语法, 使用jest eslint 为校验或测试的npm包。 因为需要使用到 ts, 模块化,所以就存在模块编译打包的问...

    copy_left
  • Git从0到1

    本文只是帮助你入门,从一个不会使用git的小白,到会解决开发中常见的使用。 废话不多说,直接进入正题。 ? 最远处 git git是用于Linux内核开发的...

    若与
  • TensorFlow从0到1 - 0 - 前言

    我是黑猿大叔,转战AI的大叔程序猿,你好。 ? 版权所有 我以官方文档为主线,开始对TensorFlow的学习。这期间会把我的理解进行持续的输出,作为《Ten...

    袁承兴
  • lerna 从0到1

    Lerna 是一种工具,针对 使用 git 和 npm 管理多软件包代码仓库的工作流程进行优化。 多包管理器

    copy_left
  • SILENTTRINITY从0到1

    SILENTTRINITY是一个现代化、异步操作、可操作的c2框架,使用.NET的API调用.NET程序。

    鸿鹄实验室
  • echarts 从0到1

    除了通过独立配置每一图表数据, echart 提供 dataset 集中管理实例内的数据集合。

    copy_left
  • fastjson从0到1

    红队蓝军
  • tailwindcss 从0到1

    Tailwind CSS 是一个功能类优先的 CSS 框架,它集成了诸如 flex, pt-4, text-center 和 rotate-90 这样的的类,它...

    copy_left
  • 从0到1实现Promise

    Promise大家一定都不陌生了,JavaScript异步流程从最初的Callback,到Promise,到Generator,再到目前使用最多的Async/A...

    leocoder
  • webpack从0到1构建

    webpack是一个静态打包工具,根据入口文件构建一个依赖图,根据需要的模块组合成一个bundle.js或者多个bundle.js,用它来展示静态资源

    Maic
  • netty使用从0到1

     本周强总在组内做了netty分享,内容相当不错,趁着这次分享记录的,以及以前研究,进行一下记录。 ?        java io形式存在三种,一种是BIO传...

    杉枫
  • 从0到1走进 Kaggle

    用户1737318

扫码关注腾讯云开发者

领取腾讯云代金券