ESLint é uma ferramenta de inspeção de código JavaScript que pode ser usada para verificar o estilo do código e possíveis erros, além de fornecer padronização e controle de qualidade do código. A seguir estão opções de configuração comuns em arquivos de configuração ESLint:
1. Instale o ESLint
Primeiro, execute o seguinte comando na linha de comando para instalar o ESLint globalmente:
npm install -g eslint
Em seguida, execute o seguinte comando no diretório raiz do projeto para inicializar a configuração do ESLint:
eslint --init
2. Opções de configuração comuns
1. analisador
Especifique o analisador, Espree é usado por padrão. Por exemplo, usando o analisador Babel:
module.exports = { parser: 'babel-eslint' }
2. estende
Estenda um conjunto de regras de configuração existente. Os valores opcionais são:
- eslint: regras padrão
- airbnb: Regras de estilo do Airbnb
- google: Regras de estilo do Google
- padrão: regras de estilo padrão JavaScript
- vue: Guia Vue.js
Por exemplo, usando as regras do Airbnb:
module.exports = { extends: 'airbnb-base' }
3. regras
Especifique regras personalizadas ou modifique as regras existentes. As regras podem especificar níveis de aviso e erro, "aviso" e "erro", respectivamente.
Por exemplo, proibir pontos e vírgulas extras:
module.exports = { rules: { 'no-extra-semi': 'error' } }
4. ambiente
Especifique o ambiente, relacionado às variáveis globais. Os valores opcionais são: es6, navegador, nó, commonjs, amd, mocha, jquery, protótipojs, shelljs, mongo, jasmim, phantomjs, transferidor.
Por exemplo, para disponibilizar um ambiente ES6:
module.exports = { env: { es6: true } }
5. globais
Defina variáveis globais:
module.exports = { globals: { Vue: false } }
3. Exemplo de arquivo de configuração
Aqui está um exemplo de arquivo de configuração usando regras do Airbnb e modificando algumas regras personalizadas:
module.exports = { extends: 'airbnb-base', rules: { 'no-console': 'off', 'no-unused-vars': 'error', 'no-extra-semi': 'error', 'semi': ['error', 'never'] }, env: { es6: true, node: true }, globals: { Vue: false } }
Crie o arquivo .eslintrc.js no diretório raiz do projeto e copie o conteúdo acima no arquivo. Em seguida, instale e ative o plug-in eslint no editor para implementar a função de inspeção de código.
vscode configurar ESlint
Baixe na extensão vscode
Clique no botão de configurações do plug-in e selecione as configurações da extensão
Digite “eslint.enable” na caixa de pesquisa, selecione a opção “Workspace” ou “User” e defina-a como true.
Em seguida, clique no botão no canto superior direito (veja a imagem)
configuração.json:
1 //Configurar eslint
2 "eslint.autoFixOnSave": true,
3 "files.autoSave":"off",
4 "eslint.validate": [
5 "javascript",
6 "javascriptreact",
7 "html",
8 { "linguagem": "vue", "autoFix": true }
9 ],
10 "eslint.options": {
11 "plugins": ["html"]
12 },
13 //Para cumprir com os dois espaços do eslint princípio de separação
14 "editor.tabSize": 2
Desta forma, sempre que você salvar um arquivo (ctrl+s), o plug-in eslint corrigirá automaticamente a sintaxe eslint do arquivo atual!
Exemplo de código do arquivo .eslintrc.cjs (copie o código a seguir no arquivo .eslintrc.cjs)
módulo.exportações = {
"env": {
"navegador": verdadeiro,
"es2021": verdadeiro,
"nó": verdadeiro
},
"estende": [
"eslint: recomendado",
"plugin: vue/vue3 recomendado",
"plugin:mais bonito/recomendado",
"eslint-config-mais bonito"
],
"substituições": [
],
"parserOptions": {
"ecmaVersion": "mais recente",
"sourceType": "módulo",
"ecmaFeatures": {
"módulos": verdadeiro,
'jsx': verdadeiro
},
"requireConfigFile": falso,
'analisador': '@babel/eslint-parser'
},
"plug-ins": [
"vue",
"mais bonito"
],
"regras": {
'no-console': 'warn', // Desativa a aparência do console
'no-debugger': 'warn', // Desativa o depurador
'no-duplicate-case': 'warn', // proíbe casos duplicados
'no-empty': 'warn', // Blocos de instruções vazios são proibidos
'no-extra-parens': 'warn', // proíbe parênteses desnecessários
'no-func-assign': 'warn', // Proíbe a reatribuição da declaração de função
'no-unreachable': 'warn', // Desativa o bloco de código após [return|throw]
'no-else-return': 'warn', // Proíbe o bloco else após a instrução return na instrução if
'no-empty-function': 'warn', // Desativa blocos de funções vazios
'no-lone-blocks': 'warn', // Desativa blocos aninhados desnecessários
'no-redeclare': 'warn', // Não declare a mesma variável várias vezes
'no-return-assign': 'warn', // Não use instruções de atribuição em instruções de retorno
'no-return-await': 'warn', // Desativa desnecessário [return/await]
'no-self-compare': 'warn', // Desativa expressões de autocomparação
'no-useless-catch': 'warn', // Desativa cláusulas catch desnecessárias
'no-useless-return': 'warn', // proíbe declarações de retorno desnecessárias
'no-multiple-empty-lines': 'warn', // Desativa múltiplas linhas vazias
'no-useless-call': 'warn', // Desativa .call() e .apply() desnecessários
'no-var': 'warn', // proíbe var e substitui-o por let e const
'no-delete-var': 'off', // Permitir o uso de variáveis de exclusão
'no-shadow': 'off', // Permite que declarações de variáveis tenham o mesmo nome que variáveis no escopo externo
'dot-notation': 'warn', // Exige o uso de pontos sempre que possível
'default-case': 'warn', // Requer uma ramificação padrão na instrução switch
'eqeqeq': 'avisar', // Requer === e !==
// 'curly': 'warn', // Exige que todas as instruções de controle usem estilo de colchetes consistente
'space-infix-ops': 'warn', // Exige espaços ao redor dos operadores
'space-unary-ops': 'warn', // Requer espaços consistentes antes e depois dos operadores unários
'switch-dois-spacing': 'warn', // Requer espaços ao redor dos dois pontos do switch
'arrow-spacing': 'warn', // Requer espaços consistentes antes e depois das funções de seta
'array-bracket-spacing': 'warn', // Requer espaçamento consistente entre colchetes de array
'brace-style': 'warn', // Exige um estilo de chaves consistente dentro dos blocos de código
'max-profundidade': ['warn', 4], // Requer uma profundidade máxima de 4 para blocos aninhados
'max-statements': ['warn', 100], // O número máximo de instruções permitidas no bloco de função é 20
'max-nested-callbacks': ['warn', 3], // Requer uma profundidade máxima de aninhamento de 3 para funções de retorno de chamada
'max-statements-per-line': ['warn', { max: 1 }], // Solicita o número máximo de instruções permitidas em cada linha
"vue/require-default-prop": 0, // Os parâmetros da propriedade Close devem ter valores padrão
"vue/singleline-html-element-content-newline": 0, // Um caractere de nova linha é necessário para fechar um elemento de linha única
"vue/nomes de componentes com várias palavras":"off",
"vue/multiline-html-element-content-newline": 0, // Um caractere de nova linha é necessário para fechar elementos multilinha
// É necessário que o máximo de atributos de cada linha de rótulos não exceda cinco
'vue/max-atributos-por-linha': ['avisar', { linha única: 5 }],
// Cancela a configuração de restrição de que o rótulo de fechamento não pode fechar automaticamente
"vue/html-fechamento automático": ["erro", {
"html": {
"void": "sempre",
"normal": "nunca",
"componente": "sempre"
},
"svg": "sempre",
"matemática": "sempre"
}]
}
}