Tutorial de início de EsLint

Introdução

O ESLint foi escrito pelo autor do JavaScript Red Book, Nicholas C. Zakas. 2013 lançou a primeira versão no ano. A intenção de NCZ não era reinventar a roda, mas fazer uma escolha quando as necessidades reais não receberam resposta da equipe JSHint: escrever uma ferramenta lint com o conceito de extensível, cada regra independente, sem estilo de codificação embutido.

Endereço oficial: http://eslint.org/

O ESLint nos ajuda a verificar erros de sintaxe ao programar JavaScript. Por exemplo: em aplicações JavaScript, é difícil encontrar variáveis ou métodos que você esqueceu. O ESLint pode nos ajudar a analisar código JS, encontrar bugs e garantir um grau de correção de escrita de sintaxe JS.

O ESLint é baseado no Esprima (arquitetura de análise ECMAScript). O Esprima suporta ES5.1também é escrito em ECMAScript, usado para análise multipropósito. O ESLint não apenas oferece algumas regras padrão (expandíveis), mas também oferece regras personalizadas do usuário para restringir o código JavaScript que escrevemos.

O ESLint oferece o seguinte suporte:

• ES6
• AngularJS
• JSX
• Verificação de estilo
• Erros e alertas personalizados
  

O ESLint oferece os seguintes tipos de verificação:

• Verificação de erros de sintaxe
• Ponto de exclamação ou sinais de interrogação irrelevantes ou perdidos, como ponto e vírgula
• Bloco de código que não pode ser executado (os alunos que usaram o WebStorm devem entender)
• Avisos sobre parâmetros não usados
• Faltando delimitadores de fechamento, como}
• Certifique-se de que as regras de estilo sejam uniformes, como sass ou less
• Verifique o nome das variáveis
  

Uso

1. Instalação

Instale o npm gulp-eslint –save-dev

No diretório do seu projeto, execute: eslint –init para gerar um arquivo .eslintrc, o conteúdo do arquivo contém algumas regras de verificação

{
 "rules": {
  "semi": ["error", "always"],
  "quotes": ["error", "double"]
 }
}

onde "semi" e "quotes" são os nomes das regras. O ESLint também oferece níveis de error, correspondendo a números, quanto maior o número, maior a dica de erro, como 0 erro de código sem dica de alerta1representa um aviso de alerta sem afetar a compilação existente2error lançará um erro.

"extends": "eslint:recommended"

Extends é a verificação recomendada padrão do ESLint, você pode usar a configuração para escolher quais verificações você precisa, você pode fazer loginnpmjs.com查看

二、自定义配置EsLint

之前提到你可以关掉所有EsLint默认的验证，自行添加所确切需要的验证规则。为此EsLint提供了2个种方式进行设置：

1. 配置注释：在所要验证的文件中，直接使用JavaScript注释嵌套配置信息
2. 配置文件：使用JavaScript、JSON或YAML文件，比如前面提到的.eslintrc文件，当然你也可以在package.json文件里添加eslintConfig字段，EsLint都会自动读取验证。
   

开始介绍EsLint的用法

parserOptions

EsLint通过parserOptions，允许指定校验的ecma的版本，及ecma的一些特性

{
 "parserOptions": {
  "ecmaVersion": 6, //指定ECMAScript支持的版本，6为ES6
  "sourceType": "module", //指定来源的类型，有两种”script”或”module”
  "ecmaFeatures": {
   "jsx": true//启动JSX
  },
 }
}

Parser

EsLint默认使用esprima做脚本解析，当然你也切换他，比如切换成babel-EsLint解析

{
 "parser": "esprima" //默认，可以设置成babel-eslint，支持jsx
}

Environments

Environment可以预设好的其他环境的全局变量，如brower、node环境变量、es6环境变量、mocha环境变量等

{
 "env": {
  "browser": true,
  "node": true
 }
}

如果你想使用插件中的环境变量，你可以使用plugins指定，如下

{
 "plugins": ["example"],
 "env": {
  "example/custom": true
 }
}

Globals

指定你所要使用的全局变量，true代表允许重写、false代表不允许重写

{
 "globals": {
  "var1: true,
  "var2: false
 }
}

Plugins

EsLint允许使用第三方插件

{
 "plugins": [
  "react" 
  ]
}

Rules

自定义规则，一般格式：”规则名称”:error级别系数。系数0为不提示(off)、1为警告(warn)、2为错误抛出(error)，可指定范围，如[1,4]

可以包括Strict模式、也可以是code的方式提醒，如符号等。还可以是第三方的校验，如react。

默认校验的地址http://eslint.org/docs/rules/

{
 "plugins": [
  "react"
 ],
 "rules": {
   //Javascript code 默认校验
  "eqeqeq": "off", //off = 0
  "curly": "error", //error = 2
  "quotes": ["warn", "double"], //warn = 1
   //使用第三方插件的校验规则
  "react/jsx-quotes": 0
 }
}

　　　　　　　　　　　 https://www.npmjs.com/package/eslint-plugin-react ， 此链接是react的eslint使用

三、Gulp中使用

var eslint = require('gulp-eslint');
-eslint
 return gulp.src(['app/**/*.js']) //Caminho especificado para a verificação
  .pipe(eslint({configFile:"./.eslintrc")) //Use seu eslint para verificar arquivos
  .pipe(eslint.format())
});

Resumo

Isso é tudo o que há neste artigo. Espero que o conteúdo deste artigo ajude você a aprender ou trabalhar. Se tiver dúvidas, você pode deixar um comentário para trocar ideias.