Você se esforça para escrever um código legal, mas não sabe por onde começar ... Você lê os guias de estilo, como 
este no Airbnb, tenta seguir as recomendações práticas dos principais especialistas ... Você precisa excluir o código não utilizado? Precisa procurar variáveis desnecessárias? Você está tentando identificar padrões ruins usados em seus programas? Por exemplo - você quer entender, lendo os meandros do código de uma determinada função, se ele retornará algo ou não. Parece familiar? O problema é que é muito difícil para um programador fazer muito e aprender muito.
Talvez você seja um líder de equipe sob cuja liderança uma equipe de desenvolvedores de diferentes níveis está trabalhando? Existem novas pessoas na sua equipe? Incomoda-lhe que o código que eles escrevem não atenda aos seus padrões? Seus dias passam nos testes do código de outras pessoas, quando essas verificações dizem respeito principalmente à conformidade com os padrões, e não à lógica do programa?

O autor deste material diz que se deparou com tudo o que as perguntas que acabamos de fazer são dedicadas. O que ele enfrenta é cansativo e desgastante. Aqui ele quer falar sobre ferramentas, cuja aplicação correta nos permite resolver os problemas acima.
Nomeadamente, aqui falaremos sobre ferramentas como Prettier, ESLint, Husky, Lint-Staged, EditorConfig e sobre automação de formatação e revestimento de código. Este material é focado principalmente no desenvolvimento do React, mas os princípios discutidos aqui podem ser aplicados em qualquer projeto da web. 
Aqui está um repositório onde, entre outras coisas, o que é discutido aqui é compilado.
Mais bonito
Prettier é uma ferramenta de formatação de código que tem como objetivo usar regras codificadas para projetar programas. Ele formata o código automaticamente. Aqui está como fica.
Prettier formata o código seguindo as regras▍ Forças mais bonitas
Aqui estão os recursos do Prettier que podem falar sobre a utilidade dessa ferramenta:
- Arrumando a base de código existente. Usando o Prettier, você pode fazer isso literalmente com apenas um comando. O processamento manual de grandes quantidades de código levará muito mais tempo. Imagine, por exemplo, o trabalho necessário para formatar manualmente 20.000 linhas de código.
- Mais bonito é fácil de implementar. Prettier usa a abordagem "média" e menos controversa de estilo ao formatar o código. Como o projeto é de código aberto, muitos contribuíram para ele, melhorando-o e suavizando cantos afiados.
- O Prettier permite que você se concentre na escrita do código, não na formatação. Muitos simplesmente não percebem quanto tempo e esforço são gastos na formatação do código. O uso do Prettier permite que você não pense em formatação, mas em programação. No meu caso, por exemplo, a eficiência do trabalho, graças a Prettier, aumentou 10%.
- Mais bonito ajuda iniciantes. Se você é um programador iniciante que trabalha na mesma equipe com profissionais sérios e deseja parecer digno no contexto deles, o Prettier o ajudará com isso.
PrConfigurando o Prettier
Veja como usar o Prettier em um novo projeto. Crie a pasta do 
app e, para ela, execute o seguinte comando na linha de comando:
 npm init -y 
Graças a este comando, o 
npm inicializa um novo projeto na pasta do 
app criando o arquivo 
package.json .
Eu, neste material, usarei 
yarn , mas aqui você pode usar 
npm . O Prettier também pode ser conectado a um projeto existente.
Instale o pacote 
prettier como uma dependência de desenvolvimento do nosso projeto:
 yarn add  
Graças a este comando, uma entrada de dependência de 
package.json será adicionada ao 
package.json seguinte aparência:
 { "name": "react-boiler-plate", "version": "1.0.0", "description": "A react boiler plate", "main": "src/index.js", "author": "Adeel Imran", "license": "MIT", "scripts": {   "prettier": "prettier --write src/**/*.js" }, "devDependencies": {   "prettier": "^1.14.3" } } 
Falaremos sobre o que a linha 
"prettier": "prettier — write src/**/*.js" significa 
"prettier": "prettier — write src/**/*.js" pouco mais tarde. Enquanto isso, crie a pasta 
src na pasta do 
app . Nesta pasta, crie o arquivo 
index.js , embora você possa nomeá-lo como quiser.
Adicionaremos o seguinte código a este arquivo (neste formato desagradável):
 let person =                     { name: "Yoda",               designation: 'Jedi Master '               };             function trainJedi (jediWarrion) { if (jediWarrion.name === 'Yoda') { console.log('No need! already trained'); } console.log(`Training ${jediWarrion.name} complete`)             } trainJedi(person)             trainJedi({ name: 'Adeel',             designation: 'padawan' }); 
Portanto, no momento, temos o 
src/app/index.js , que contém um código mal projetado.
Como consertar isso? Existem três abordagens para trabalhar com código mal formatado:
- Formate manualmente este código.
- Use uma ferramenta automatizada.
- Deixe como está e continue trabalhando (peço que você não escolha essa abordagem).
Eu vou escolher a segunda opção. Agora, em nosso projeto, existe uma dependência correspondente e, além disso, na seção de 
scripts do arquivo 
package.json há um registro sobre o Prettier. É claro que usaremos essa ferramenta para formatar o código. Para fazer isso, crie o arquivo 
prettier.config.js na pasta do 
app e adicione as regras para o Prettier:
 module.exports = { printWidth: 100, singleQuote: true, trailingComma: 'all', bracketSpacing: true, jsxBracketSameLine: false, tabWidth: 2, semi: true, }; 
Vamos analisar estas regras:
- printWidth: 100- o comprimento da linha não deve exceder 100 caracteres.
- singleQuote: true- todas as aspas duplas serão convertidas em aspas simples. Consulte o Guia de Estilo do Airbnb para mais detalhes. Eu realmente gosto deste guia, eu o uso para melhorar a qualidade do meu código.
- trailingComma: 'all'- fornece uma vírgula após a última propriedade do objeto. Aqui está um bom artigo sobre este tópico.
- bracketSpacing: true- responsável por inserir espaços entre o corpo do objeto e chaves nos literais do objeto. Se essa propriedade estiver configurada como- true, os objetos declarados usando literais de objetos terão a seguinte aparência:- { foo: bar }. Se você configurá-lo como- false, essas construções terão a seguinte aparência:- {foo: bar}.
- jsxBracketSameLine: false- graças a essa regra, o símbolo- >nos elementos JSX de várias linhas será colocado na última linha. Aqui está a aparência do código se esta regra estiver definida como- true:
 <button className="prettier-class" id="prettier-id" onClick={this.handleClick}> Click Here </button> 
Aqui está o que acontece se estiver definido como 
false :
 <button className="prettier-class" id="prettier-id" onClick={this.handleClick} > Click Here </button> 
- tabWidth: 2- define o número de espaços por nível de alinhamento.
- semi: true- se essa regra estiver configurada como- true, um ponto-e-vírgula será adicionado no final das expressões.
Encontre todas as regras do Prettier aqui.
Agora que as regras estão configuradas, vamos falar sobre este script:
 "prettier": "prettier  — write src/**/*.js" 
Graças a esse design, o Prettier inicia e localiza todos os arquivos 
.js na pasta 
src . O sinalizador 
--write diz para ele salvar os arquivos formatados à medida que são processados e corrige os erros de formatação encontrados neles.
Execute o script na linha de comando:
 yarn prettier 
Foi o que aconteceu depois disso com o código mal formatado mostrado acima.
Resultado da formatação do código com o PrettierSobre isso, assumiremos que com Prettier descobrimos. Vamos falar sobre linters.
ESLint
Linting é um tipo de análise de código estático que é freqüentemente usada para encontrar padrões de design problemáticos ou código que não segue determinadas diretrizes de estilo.
Existem linters projetados para a maioria das linguagens de programação, às vezes os compiladores incluem linting no processo de compilação de código. Essa definição de linting é obtida da 
página de informações de código aberto do JavaScript JavaScript ESLint de código aberto, sobre o qual falaremos em breve.
HyPor que preciso de um linter para JavaScript?
Como o 
JavaScript é uma linguagem de programação dinâmica com digitação fraca, o código escrito é propenso a erros cometidos pelos desenvolvedores. O JavaScript é uma linguagem interpretada, portanto, sintaxe e outros erros no código geralmente são detectados somente após a execução desse código.
Linters, como 
ESLint , permitem que os desenvolvedores encontrem problemas no código sem iniciá-lo.
HyPor que o ESLint é uma ferramenta especial?
Uma boa pergunta foi colocada no título desta seção. O ponto aqui é que o ESLint suporta plugins. Portanto, as regras de verificação de código não devem ser um pacote monolítico. Tudo o que você precisa pode ser conectado conforme necessário. Cada regra de cotão adicionada ao sistema é autônoma, pode ser ativada ou desativada, independentemente das demais. Cada regra pode receber um nível de alerta de acordo com o desejo do desenvolvedor - pode ser um aviso (aviso) ou erro (erro).
Ao usar o ESLint, você está trabalhando com um sistema totalmente personalizável que pode refletir sua compreensão de como deve ser o código correto e capturar qual conjunto de regras você segue.
Entre os guias de estilo JavaScript existentes, os seguintes são muito populares:
Como já mencionado, eu uso o guia de estilo do Airbnb. Fui orientado por este documento pelo meu gerente da empresa onde minha carreira profissional começou e considero este guia de estilo o meu bem mais valioso.
Este guia é mantido ativamente - dê uma olhada no seu 
repositório no GitHub. Aqui vou usar um conjunto de regras baseadas nele.
Agora vamos trabalhar no arquivo 
package.json , adicionar algumas dependências a ele:
 { "name": "react-boiler-plate", "version": "1.0.0", "description": "A react boiler plate", "main": "src/index.js", "author": "Adeel Imran", "license": "MIT", "scripts": {   "lint": "eslint --debug src/",   "lint:write": "eslint --debug src/ --fix",   "prettier": "prettier --write src/**/*.js" }, "husky": {   "hooks": {     "pre-commit": "lint-staged"   } }, "lint-staged": {   "*.(js|jsx)": ["npm run lint:write", "git add"] }, "devDependencies": {   "babel-eslint": "^8.2.3",   "eslint": "^4.19.1",   "eslint-config-airbnb": "^17.0.0",   "eslint-config-jest-enzyme": "^6.0.2",   "eslint-plugin-babel": "^5.1.0",   "eslint-plugin-import": "^2.12.0",   "eslint-plugin-jest": "^21.18.0",   "eslint-plugin-jsx-a11y": "^6.0.3",   "eslint-plugin-prettier": "^2.6.0",   "eslint-plugin-react": "^7.9.1",   "husky": "^1.1.2",   "lint-staged": "^7.3.0",   "prettier": "^1.14.3" } } 
Antes de falar sobre como trabalhar com essa configuração, quero me debruçar sobre as dependências do projeto que são adicionadas ao 
package.json . Acredito que antes de usar algumas dependências, você deve saber qual papel elas desempenham.
Portanto, discutiremos o papel dos pacotes apresentados aqui:
- babel-eslint- permite que você use o linting para aplicar a tudo o que Babel fornece. Você não precisa deste plug-in se não estiver usando o Flow ou recursos experimentais que o ESLint ainda não suporta.
- eslinté a principal ferramenta usada para codificar o código.
- eslint-config-airbnb- fornece regras do Airbnb como uma configuração que pode ser modificada.
- eslint-plugin-babelé um plug-in ESLint que complementa o- babel-eslint. Ele redesenhou as regras que, ao usar o- babel-eslint, causam problemas ao processar recursos experimentais.
- eslint-plugin-import- este pacote suporta a vinculação de novas construções de sintaxe de- import/exporte ajuda a evitar problemas associados à ortografia incorreta dos caminhos dos arquivos e nomes dos módulos importados.
- eslint-plugin-jsx-a11y- fornece regras relacionadas à disponibilidade de elementos JSX para pessoas com deficiências. Acessibilidade na Web é muito importante.
- eslint-plugin-prettier- Ajuda o ESLint e o Prettier a trabalharem juntos. É assim: quando o Prettier formata o código, ele o leva em consideração as regras do ESLint.
- eslint-plugin-reactreact - contém regras ESLint criadas para o React.
Neste artigo, não estamos falando sobre teste de código, mas no 
package.json acima, existem dependências projetadas para teste de unidade usando 
Jest / Enzyme . Agora, se você decidir usar essas ferramentas para teste, faça uma descrição dos pacotes relevantes.
- eslint-config-jest-enzyme- este pacote destina-se aos casos em que você usa- jest-environment-enzyme, o que leva ao fato de que as variáveis React e Enzyme são globais. Graças a isso, o ESLint não emitirá avisos sobre essas variáveis.
- eslint-plugin-jest —plugin ESlint para Jest.
Existem mais alguns pacotes no arquivo que discutiremos mais adiante, discutindo questões de automação. Isso é 
husky e 
lint-staged .
Agora que discutimos nossas ferramentas em termos gerais, continuaremos trabalhando.
Crie o arquivo 
.eslintrc.js na pasta do 
app :
 module.exports = {   env: {       es6: true,       browser: true,       node: true,   },   extends: ['airbnb', 'plugin:jest/recommended', 'jest-enzyme'],   plugins: [       'babel',       'import',       'jsx-a11y',       'react',       'prettier',   ],   parser: 'babel-eslint',   parserOptions: {       ecmaVersion: 6,       sourceType: 'module',       ecmaFeatures: {           jsx: true       }   },   rules: {       'linebreak-style': 'off', //    Windows.       'arrow-parens': 'off', //   prettier       'object-curly-newline': 'off', //   prettier       'no-mixed-operators': 'off', //   prettier       'arrow-body-style': 'off', //  -   ?       'function-paren-newline': 'off', //   prettier       'no-plusplus': 'off',       'space-before-function-paren': 0, //   prettier       'max-len': ['error', 100, 2, { ignoreUrls: true, }], // airbnb           'no-console': 'error', // airbnb         'no-alert': 'error', // airbnb         'no-param-reassign': 'off', //  -   ?       "radix": "off", // parseInt, parseFloat  radix .    .       'react/require-default-props': 'off', // airbnb           'react/forbid-prop-types': 'off', // airbnb           'react/jsx-filename-extension': ['error', { extensions: ['.js'] }], // airbnb  .jsx       'prefer-destructuring': 'off',       'react/no-find-dom-node': 'off', //           'react/no-did-mount-set-state': 'off',       'react/no-unused-prop-types': 'off', //            'react/jsx-one-expression-per-line': 'off',       "jsx-a11y/anchor-is-valid": ["error", { "components": ["Link"], "specialLink": ["to"] }],       "jsx-a11y/label-has-for": [2, {           "required": {               "every": ["id"]           }       }], //     htmlFor  label       'prettier/prettier': ['error'],   }, }; 
Agora adicione o arquivo 
.eslintignore à pasta do 
app :
 /.git /.vscode node_modules 
Agora vamos falar sobre como o arquivo 
.eslintrc.js está 
.eslintrc.js e sobre o significado das construções apresentadas nele.
Este arquivo tem a seguinte estrutura:
 module.exports = {  env:{},  extends: {},  plugin: {},  parser: {},  parserOptions: {},  rules: {}, }; 
Considere os blocos deste arquivo representados por objetos com os nomes correspondentes:
- env- permite especificar uma lista de ambientes para os quais você planeja verificar o código. No nosso caso, existem- es6,- browsere propriedades do- nodedefinidas como- true. O parâmetro- es6inclui recursos do ES6, com exceção dos módulos (esse recurso define automaticamente, no bloco- parserOptions, o parâmetro- ecmaVersionpara- 6). O parâmetro- browservariáveis globais do navegador, como- Windows. O parâmetro- nodeadiciona variáveis e escopos globais do ambiente Node.js., por exemplo,- global. Detalhes sobre os ambientes podem ser encontrados aqui .
- extends- é uma matriz de linhas com configurações, com cada configuração adicional estende a anterior. As regras de- airbnbAirbnb são usadas- airbnb, que são expandidas para- jeste depois expandidas para- jest-enzyme.
- plugins- aqui estão as regras de cotação que queremos usar. Aplicamos as regras- babel,- import,- jsx-a11y,- jsx-a11y,- jsx-a11y, sobre as quais já falamos.
- parser- o ESLint usa o- parserEspree por padrão, mas como trabalhamos com Babel, precisamos usar o Babel-ESLint .
- parserOptions- desde que alteramos o analisador padrão para- babel-eslint, também precisamos definir as propriedades nesse bloco. A propriedade- ecmaVersiondefinida como- 6indica ao ESLint que o código ES6 será verificado. Como estamos escrevendo código nos módulos- EcmaScript, a propriedade- sourceTypedefinida como- module. E, finalmente, como usamos React, o que significa usar JSX, um objeto com a chave- jsxdefinida como- truegravado na propriedade- ecmaFeatures.
- rules- Eu gosto mais desta parte do arquivo- .eslintrc.jspois permite configurar as regras ESLint. Todas as regras que expandimos ou adicionamos usando plug-ins podem ser alteradas ou redefinidas, e isso é feito no bloco de- rules. O texto do arquivo contém comentários sobre as regras.
Agora vamos falar sobre o arquivo 
.eslintignore . Este arquivo aceita uma lista de caminhos que representam pastas cujo conteúdo não deve ser processado usando o ESLint.
Três pastas são definidas aqui:
- /.git- não preciso do ESLint para verificar arquivos relacionados ao Git.
- /.vscode- o projeto tem essa pasta devido ao fato de eu usar o VS Code. Aqui, o editor armazena informações de configuração que podem ser definidas para cada projeto. Esses dados também não devem ser processados pelo linter.
- node-modules- os arquivos de dependência também não precisam ser verificados com um linter.
Agora, vamos ver alguns scripts novos que apareceram no 
package.json . Aqui estão elas:
 "lint": "eslint --debug src/" "lint:write": "eslint --debug src/ --fix" 
Se você executar o primeiro deles, usando o comando 
yarn lint ou 
npm run lint , isso fará com que o linter 
npm run lint todos os arquivos no diretório 
src e exiba um relatório detalhado dos arquivos nos quais encontrou erros. Usando este relatório, você pode corrigir esses erros.
Executando script lintSe você executar o segundo script ( 
yarn lint:write ), o ESLint executará a mesma verificação que foi executada anteriormente. A única diferença é que, nesse modo, o sistema tentará corrigir os erros detectados, tentará trazer o código da forma mais decente possível.
Extensão ESLint para código VS
Já temos o Prettier e o ESLint configurados, mas para usar os recursos dessas ferramentas, precisamos executar scripts. Isso não é muito conveniente, então tente corrigi-lo. Ou seja, queremos garantir que a formatação e a limpeza do código sejam executadas pelo comando para salvar o arquivo no editor. Além disso, queremos executar o linting e a formatação do código antes de confirmar.
Como exemplo, usamos o editor de código VS. Vamos precisar 
da extensão ESLint para o VS Code. Para instalá-lo, você pode abrir o painel de extensão do Código VS ( 
ctrl+shift+x ). Aqui, no campo de pesquisa, digite 
eslint . Uma lista de extensões é exibida. O que nos interessa é aquele cujas informações do desenvolvedor são Dirk Baeumer. Depois de instalar esta extensão, reinicie o editor.
Agora, na pasta raiz do projeto ( 
app ), crie a pasta 
.vscode (preste atenção ao ponto no início do nome - isso é importante). Nesta pasta, crie um arquivo 
settings.json com o seguinte conteúdo:
 { "editor.formatOnSave": false, "eslint.autoFixOnSave": true, } 
Considere o seu conteúdo.
- A propriedade editor.formatOnSaveconfigurada comofalseindica que não precisamos da configuração padrão para aplicar à formatação do arquivo, pois isso pode causar um conflito com o ESLint e o Prettier.
- A propriedade eslint.autoFixOnSaveconfigurada comotrue, porque é necessário que o plug-in instaladoeslint.autoFixOnSavetoda vez que um arquivo for salvo. Como o ESLint e o Prettier trabalham juntos em um projeto, salvar o arquivo leva à formatação e à codificação.
É importante observar que agora, quando o script 
lint:write for executado, ele executará a formatação do código e do 
lint:write .
Imagine seus sentimentos se obtivesse um código de projeto de 20.000 linhas que você precisaria verificar e melhorar. Agora imagine que você precisaria fazer isso manualmente. Esse trabalho provavelmente levaria um mês. E com a ajuda das ferramentas de automação acima, tudo isso é feito em cerca de trinta segundos.
Agora, depois de configurar tudo o que você precisa, toda vez que você salvar um arquivo com um código, o editor se encarregará de verificar e formatar o texto do programa. No entanto, aqui estamos falando sobre o editor de código VS. É possível que alguém da sua equipe prefira outro editor. Não há nada de errado nisso, mas, para tornar conveniente o trabalho de todos, teremos que descobrir outra coisa para automatizar.
Husky
O pacote Husky permite que você use os ganchos Git. Isso significa que você tem a oportunidade de executar determinadas ações antes de confirmar ou antes de enviar o código do repositório.
Para tirar proveito dos recursos do Husky, primeiro instale este pacote:
 yarn add  
Depois disso, adicione o seguinte ao 
package.json :
 "husky": {     "hooks": {         "pre-commit": "YOUR_COMMAND_HERE",    "pre-push": "YOUR_COMMAND_HERE"    } }, 
Isso levará ao fato de que antes de executar o comando 
commit ou 
push , um determinado script será chamado, que, por exemplo, executa teste ou formatação de código.
Detalhes sobre o Husky podem ser encontrados 
aqui .
Encenado por fiapos
O pacote 
preparado pelo Lint permite verificar os arquivos indexados usando o linter, o que ajuda a impedir que erros sejam enviados ao repositório.
O linting faz sentido antes de confirmar o código. Graças a isso, você pode garantir que os erros não penetrem no repositório e fornecer um estilo unificado do código que chega lá. No entanto, aprender a verificar todo o projeto pode ser uma tarefa muito longa e os resultados dessa verificação podem não ter sentido. Por fim, o linting pode precisar expor os arquivos que você planeja confirmar.
Preparado por fiapos permite executar um conjunto de tarefas arbitrárias em arquivos indexados filtrados por um padrão de pesquisa. Detalhes sobre isso podem ser encontrados 
aqui .
Instale o pacote preparado pelo Lint:
 yarn add  
Em seguida, no arquivo 
package.json , adicione o seguinte:
 "lint-staged": {     "*.(js|jsx)": ["npm run lint:write", "git add"] }, 
Graças a essa construção, o comando 
lint:write será executado primeiro, verificando o conteúdo do arquivo e corrigindo erros, após o qual os arquivos serão adicionados ao índice com o comando 
git add . Agora, este comando é direcionado aos arquivos 
.js e 
.jsx , mas o mesmo pode ser feito com arquivos de outros tipos.
Compartilhamento com husky e fiapos
Considere um diagrama de ação que permita organizar o próximo fluxo de trabalho. Cada vez que você confirma arquivos com código, antes de executar esta operação, o sistema executa o script 
lint-staged pelo 
lint-staged , que, por sua vez, executa o script 
lint:write , que executa o linting e a formatação do código. Depois disso, os arquivos são adicionados ao índice e confirmados. Parece-me que é muito conveniente. De fato, no código apresentado anteriormente do arquivo 
package.json , isso já está implementado, apenas não falamos sobre isso antes.
Aqui está o conteúdo do nosso 
package.json novamente:
 { "name": "react-boiler-plate", "version": "1.0.0", "description": "A react boiler plate", "main": "src/index.js", "author": "Adeel Imran", "license": "MIT", "scripts": {   "lint": "eslint --debug src/",   "lint:write": "eslint --debug src/ --fix",   "prettier": "prettier --write src/**/*.js" }, "husky": {   "hooks": {     "pre-commit": "lint-staged"   } }, "lint-staged": {   "*.(js|jsx)": ["npm run lint:write", "git add"] }, "devDependencies": {   "babel-eslint": "^8.2.3",   "eslint": "^4.19.1",   "eslint-config-airbnb": "^17.0.0",   "eslint-config-jest-enzyme": "^6.0.2",   "eslint-plugin-babel": "^5.1.0",   "eslint-plugin-import": "^2.12.0",   "eslint-plugin-jest": "^21.18.0",   "eslint-plugin-jsx-a11y": "^6.0.3",   "eslint-plugin-prettier": "^2.6.0",   "eslint-plugin-react": "^7.9.1",   "husky": "^1.1.2",   "lint-staged": "^7.3.0",   "prettier": "^1.14.3" } } 
Agora que você conhece os estágios Husky e Lint, pode avaliar o impacto deles no trabalho com o Git. Ou seja, suponha que os seguintes comandos foram executados:
 $ git add . $ git commit -m "some descriptive message here" 
É claro que, antes da confirmação, o código será verificado quanto à conformidade com as regras especificadas em 
.eslintrc.js e, se necessário, corrigido. Graças a isso, os erros nunca entrarão no repositório de um projeto em funcionamento.
Agora você sabe como integrar o Prettier, ESLint, Husky e Lint em seu projeto.
Deixe-me lembrá-lo de que dissemos acima que nem todos os membros de sua equipe usam meu código VS favorito. Para que todos eles funcionem convenientemente, precisamos lidar com o arquivo 
.editorconfig .
Arquivo .Editorconfig
Diferentes membros da sua equipe podem usar editores diferentes. Forçando-os a usar qualquer editor para qualquer coisa. No entanto, para que todos possam usar as mesmas configurações, por exemplo, recuos ou feeds de linha, usamos o arquivo 
editorconfig . .
, . , , WebStorm, AppCode, Atom, Eclipse, Emacs, BBEdit .
app .editorconfig :
 # EditorConfig -  : http://EditorConfig.org #  EditorConfig   root = true [*.md] trim_trailing_whitespace = false [*.js] trim_trailing_whitespace = true #     Unix       [*] indent_style = space indent_size = 2 end_of_line = lf charset = utf-8 insert_final_newline = true max_line_length = 100 
, :
- trim_trailing_whitespace = false—- .md- .- .js-- false.
- indent_style = space— .
- indent_size = 2— .
- end_of_line = lf—- lf. , , . .
- insert_final_newline = true— .
- max_line_length = 100— 100 .
Sumário
, , , . , , .
Caros leitores! ? ?