专栏首页方球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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

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

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

    树酱
  • Git从0到1

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

    若与
  • Kubernetes 从0到1

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

    heidsoft
  • rollup从0到1

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

    copy_left
  • lerna 从0到1

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

    copy_left
  • SILENTTRINITY从0到1

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

    鸿鹄实验室
  • TensorFlow从0到1 - 0 - 前言

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

    袁承兴
  • Word Embeddings从0到1

    在做一个课程作业, 看了一些 Word Embeddings 相关的论文和博客. 以下内容基本上是看博客的时候摘译的, 写得很好, 恨不得全翻了. 论文笔记反正...

    企鹅号小编
  • TensorFlow从0到1 - 1 - Hello, TensorFlow!

    在学习任何新的编程语言时,我们都会在第一时间完成Hello World,以宣告自己开发环境的完美搭建。TensorFlow也不例外。TensorFlow充分考...

    袁承兴
  • 1、webpack从0到1-开始

    Ewall
  • 从0到1走进 Kaggle

    用户1737318
  • netty使用从0到1

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

    杉枫
  • 从 0 到 1 走进 Kaggle

    本文结构: kaggle 是什么 如何参赛 解决问题一般步骤 进一步: 如何探索数据 如何构造特征 提交结果 ---- kaggle 是什么? Kaggle ...

    杨熹
  • 12、webpack从0到1-Prefetching/Preloading

    Ewall
  • MongoDB技术从0到1+

    偶然机会看到mongo中文社区办了场征文活动,觉得挺有意思的,虽说自己还在成为大佬的路上,但参与一下未尝不可。于是就有了这篇文章。

    MongoDB中文社区
  • 从0到1认识XHTML

    XHTML是一种可扩展超文本标记语言,与HTML(超文本标记语言)类似,不过在语法上更加严格。XHTML是以XML(是一种必须正确标记且格式良好的标记语言)应用...

    呆呆
  • TensorFlow从1到2 - 0 - 前言

    我是黑猿大叔,转战AI的大叔程序猿,你好。 ? 本篇是《TensorFlow从1到2》的前言,本主题将会涵盖现代卷积网络基础,及其TensorFlow实...

    袁承兴
  • TensorFlow从0到1 - 19 - 回顾

    see you soon 《TensorFlow从0到1》就要结束了。 3条主线 这个部分共包含18篇文章,4万余字(简书的严格统计不到4万)。总的来说,它无外...

    袁承兴
  • 《从0到1学Netty》Netty RPC

    RPC,即 Remote Procedure Call(远程过程调用),调用远程计算机上的服务,就像调用本地服务一 样。RPC 可以很好的解耦系统,如 WebS...

    程序员小强

扫码关注云+社区

领取腾讯云代金券