ESLint 介绍

ESLint 介绍

• 最为主流的 JavaScript Lint 工具 监测 JS 代码质量
• ESLint 很容易统一开发者的编码风格
• ESLint 可以帮助开发者提升编码能力

ESLint 安装步骤

• 初始化项目
• 安装 ESLint 模块为开发依赖
• yarn add eslint –dev

ESLint 快速上手

　　初始化执行 ESLint 配置文件        yarn eslint –init

　　How would you like to use ESLint ?

1.  to check syntax only    (只检查语法性错误)
2.  to check syntax and find problems    (检查语法性错误并且还去发现问题代码)
3.  tocheck syntax, find problems, and enforce code style    (我们要去检查语法，并且找到问题代码，同时对代码风格也要做一些校验)   推荐 

　　What type of modules does your project use ?　 (您的项目使用什么类型的模块)

1.  JavaScript modules ( import / exprot )      ESM
2.  CommonJS ( require / exports )    CommonJS
3.  None of these   

　　Which framework does your project use ?     (您的项目使用哪种框架)

1.  React
2.  Vue.js
3.  None of these

　　Does your project use TypeScript ? (Y/N)      (你的项目使用TypeScript吗)    

　　Where does your code run ? (你的代码在哪里运行)

1.  Browser ( 浏览器 )
2.  Node ( NodeJS )

　　How would you like to define a style for your project ? (您希望如何为您的代码风格)

1.  Use a popular style guide (使用主流的风格）推荐      Airbnb       Standard(推荐)      Google
2.  Answer questions aboute your style (回答关于你风格的问题，然后形成风格)
3.  Inspect your JavaScript file(s) (检查你的JavaScript文件，推断出来你的风格)

　　What format do you want your config file to be in ? (您希望配置文件的格式是什么)    javaScript (推荐)     YAML      JSON

　　之后会下载Standard风格依赖   YES 就可以了

　　执行代码检查

　　yarn eslint  xxx.js    这样就会提示代码问题和编码风格问题

　　也可以是用 –fix 修正绝大多数代码风格上的问题

　　yarn eslint xxx.js –fix

ESLint 配置

module.exports = {
  env: {  //标记当前代码的运行环境
    browser: true,
    es2021: true
  },
  extends: [    //继承共享配置
    'standard'
  ],
  parserOptions: {   //设置语法解析器配置
    ecmaVersion: 12    //版本
  },
  rules: {  //配置检验规则的开始或者关闭
  }
}

ENV可以是可以设置哪些运行环境

• browser -浏览器环境中的全局变量。
• node – Node.js全局变量和Node.js作用域。
• commonjs – CommonJS全局变量和CommonJS作用域（用于Browseri-Fy/WebPack打包的只在浏览器中运行的代码）。
• shared-node-browser – Node.js 和 Browser 通用全局变量。
• es6 -启用除了 modules以外的拓有ECMAScript 6特屉（该选项会自动设置ecmaVersion解析器选项为6） 。
• worker – Web Workers 全局变量。
• amd -将require。和define。定义为像amd —样的全局变量。
• mocha -添加所有的Mocha测试全局变量。
• jasmine -添加所有的Jasmine版本1.3和2.0的测试全局变量。
• jest – Jest全局变量。
• phantomjs – PhantomJS 全局变量。
• protractor – Protractor 全局变量。
• qunit – QUnit全局变量。
• jquery – jQuery 全局变量。
• prototypejs – Prototype, js 全局变量。
• shelljs – ShellJS 全局变量。
• meteor – Meteor 全局变量。
• mongo – MongoDB 全局变量。
• applescript – AppleScript 全局变里。
• nashorn – Java 8 Nashorn 全局变量。
• serviceworker – Service Worker 全局变量。
• atomtest – Atom测试全局变量。
• embertest – Ember测试全局变量。
• webextensions – WebExtensions 全局变量。
• greasemonkey – GreaseMonkey 全局变量

ESLint 配置注释

不修改 ESLint 配置的基础上需要违反了配置规则的代码，

可以在你的文件中使用以下格式的块注释来临时禁止规则出现警告

const str1 = '${name} is a coder' // eslint-disable-line no-template-curly-in-string

console.log(str1)

为文件的某部分禁用警告的注释，告诉 ESLint 不要对禁用的代码报告规则的冲突。ESLint 仍解析整个文件，然而，禁用的代码仍需要是有效的 JavaScript 语法。

ESLint 结合自动化工具

• 继承之后，ESLint 一定会工作(集成在构建的过程当中)
• 与项目统一，管理更加方便

结合Gulp使用   需要安装 eslint   gulp-eslint      注意版本控制

const script = () => {
  return src('src/assets/scripts/*.js', { base: 'src' })
    .pipe(plugins.eslint()) //进行代码检查
    .pipe(plugins.eslint.format()) //格式化
    .pipe(plugins.eslint.failAfterError())  //发现异常抛出,中断执行
    .pipe(plugins.babel({ presets: ['@babel/preset-env'] }))
    .pipe(dest('temp'))
    .pipe(bs.reload({ stream: true }))
}

结合webpack使用   需要安装 eslint   gulp-eslint      注意版本控制

rules: [
      {
        test: /\.js$/, 
        exclude: /node_modules/, 
        use: [
          'babel-loader',
          'eslint-loader'
        ]
      }
    ]

结合typescript使用 

配置文件   parser  制定一个语法解析器

今天的文章ESLint 介绍分享到此就结束了，感谢您的阅读，如果确实帮到您，您可以动动手指转发给其他人。