Skip to content
Permalink
Browse files

CRA ReactJS - Aula 02 - Configurando Eslint, Prettier e EditorConfig

  • Loading branch information
tgmarinho committed Sep 24, 2019
1 parent d27ef93 commit 287881809382cf33c18a14dec9b01d6965aa90e5
Showing with 253 additions and 14 deletions.
  1. +9 −0 .editorconfig
  2. +25 −0 .eslintrc.js
  3. +4 −0 .prettierrc
  4. +135 −1 README.md
  5. +14 −1 package.json
  6. +1 −1 src/App.js
  7. +4 −4 src/index.js
  8. +61 −7 yarn.lock
@@ -0,0 +1,9 @@
root = true

[*]
end_of_line = lf
indent_style = space
indent_size = 2
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
@@ -0,0 +1,25 @@
module.exports = {
env: {
browser: true,
es6: true,
},
extends: ['airbnb', 'prettier', 'prettier/react'],
globals: {
Atomics: 'readonly',
SharedArrayBuffer: 'readonly',
},
parser: 'babel-eslint',
parserOptions: {
ecmaFeatures: {
jsx: true,
},
ecmaVersion: 2018,
sourceType: 'module',
},
plugins: ['react', 'prettier'],
rules: {
'prettier/prettier': 'error',
'react/jsx-filename-extension': ['warn', { extensions: ['.jsx', 'js'] }],
'import/prefer-default-export': 'off',
},
};
@@ -0,0 +1,4 @@
{
"singleQuote": true,
"trailingComma": "es5"
}
136 README.md
@@ -1 +1,135 @@
# front-react
## Aula 02 - ESLint, Prettier e EditorConfig

Vamos configurar as ferramentas ESLint, Prettier e EditorConfig para manter uma *style guide* no projeto.

### Editor Config

Primeiro vamos configurar o EditorConfig, usando o VSCode e a extensão do EditorConfig basta clicar com botão direito do mouse e escolher: `generate .editorConfig`, e o VSCode vai criar um arquivo para nós.

E faço uma pequena alteração.

```
root = true
[*]
end_of_line = lf # forçar o padrão do final da linha para padrão unix
indent_style = space
indent_size = 2
charset = utf-8
trim_trailing_whitespace = true # mudo para true
insert_final_newline = true # mudo para true
```

### Eslint

Vamos instalar o eslint como dependência de desenvolvimento:

```
yarn add eslint -D
```

e executar:

```
yarn eslint --init
```

Opções:

```
❯ To check syntax, find problems, and enforce code style
❯ JavaScript modules (import/export)
❯ React
❯ Typscript -> Não
❯ Browser
❯ Use a popular style guide
❯ Airbnb (https://github.com/airbnb/javascript)
❯ JavaScript
❯ Y
```

e as dependências serão instaladas.

O Eslint usa o npm por padrão, então depois de baixar as dependências, eu removo o arquivo `package.json-lock` e rodo o comando `yarn` novamente para atualizar as dependências no `yarn.lock`.

Pronto, agora o código vai acusar alguns erros, e para concluir a configuração vamos instalar o Prettier.

### Prettier

Para instalar o prettier e alguns plugins de configuração, vamos rodar no terminal:

```
yarn add prettier eslint-config-prettier eslint-plugin-prettier babel-eslint -D
```

E agora configuraremos o `.eslintrc`:

```
module.exports = {
env: {
browser: true,
es6: true,
},
extends: ['airbnb', 'prettier', 'prettier/react'],
globals: {
Atomics: 'readonly',
SharedArrayBuffer: 'readonly',
},
parser: 'babel-eslint',
parserOptions: {
ecmaFeatures: {
jsx: true,
},
ecmaVersion: 2018,
sourceType: 'module',
},
plugins: ['react', 'prettier'],
rules: {
'prettier/prettier': 'error',
'react/jsx-filename-extension': ['warn', { extensions: ['.jsx', 'js'] }],
'import/prefer-default-export': 'off',
},
};
```

E depois criamos um arquivo `.prettierrc` na raiz do projeto, com a seguinte configuração:

```
{
"singleQuote": true,
"trailingComma": "es5"
}
```

Isso melhora a integração do prettier com a style guid airbnb que estamos utilizando.

Pronto! Agora o prettier deixa o código mais bonita e o eslint procura por erros na style-guide.

Agora toda vez que entrar em um arquivo e salvar, ele vai verificar se as regras estão de acordo com o style-guide através do eslint e o prettier irá formatar de acordo com as regras do style-guide e eslint.

Podemos automatizar isso fazendo um script no package.json:

```
"lint": "eslint --fix src --ext .js"
```

e agora rodar o comando:

```
yarn lint
```

Para deixar o código seguindo as normas da style-guide.



Fim, código fonte: [https://github.com/tgmarinho/front-react/tree/aula02-eslint-prettier-editorconfig](https://github.com/tgmarinho/front-react/tree/aula02-eslint-prettier-editorconfig)
@@ -11,7 +11,8 @@
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
"eject": "react-scripts eject",
"lint": "eslint --fix src --ext .js"
},
"eslintConfig": {
"extends": "react-app"
@@ -27,5 +28,17 @@
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"babel-eslint": "^10.0.3",
"eslint": "^6.4.0",
"eslint-config-airbnb": "^18.0.1",
"eslint-config-prettier": "^6.3.0",
"eslint-plugin-import": "^2.18.2",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-prettier": "^3.1.1",
"eslint-plugin-react": "^7.14.3",
"eslint-plugin-react-hooks": "^1.7.0",
"prettier": "^1.18.2"
}
}
@@ -1,4 +1,4 @@
import React from "react";
import React from 'react';

function App() {
return (
@@ -1,5 +1,5 @@
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById("root"));
ReactDOM.render(<App />, document.getElementById('root'));
@@ -1753,7 +1753,7 @@ babel-code-frame@^6.22.0:
esutils "^2.0.2"
js-tokens "^3.0.2"

babel-eslint@10.0.3:
babel-eslint@10.0.3, babel-eslint@^10.0.3:
version "10.0.3"
resolved "https://registry.yarnpkg.com/babel-eslint/-/babel-eslint-10.0.3.tgz#81a2c669be0f205e19462fed2482d33e4687a88a"
integrity sha512-z3U7eMY6r/3f3/JB9mTsLjyxrv0Yb1zb8PCWCLpguxfCzBIZUwy23R1t/XKewP+8mEN2Ck8Dtr4q20z6ce6SoA==
@@ -2532,7 +2532,7 @@ concat-stream@^1.5.0:
readable-stream "^2.2.2"
typedarray "^0.0.6"

confusing-browser-globals@^1.0.9:
confusing-browser-globals@^1.0.7, confusing-browser-globals@^1.0.9:
version "1.0.9"
resolved "https://registry.yarnpkg.com/confusing-browser-globals/-/confusing-browser-globals-1.0.9.tgz#72bc13b483c0276801681871d4898516f8f54fdd"
integrity sha512-KbS1Y0jMtyPgIxjO7ZzMAuUpAKMt1SzCL9fsrKsX6b0zJPTaT0SiSPmewwVZg9UAO83HVIlEhZF84LIjZ0lmAw==
@@ -3436,6 +3436,31 @@ escodegen@^1.11.0, escodegen@^1.9.1:
optionalDependencies:
source-map "~0.6.1"

eslint-config-airbnb-base@^14.0.0:
version "14.0.0"
resolved "https://registry.yarnpkg.com/eslint-config-airbnb-base/-/eslint-config-airbnb-base-14.0.0.tgz#8a7bcb9643d13c55df4dd7444f138bf4efa61e17"
integrity sha512-2IDHobw97upExLmsebhtfoD3NAKhV4H0CJWP3Uprd/uk+cHuWYOczPVxQ8PxLFUAw7o3Th1RAU8u1DoUpr+cMA==
dependencies:
confusing-browser-globals "^1.0.7"
object.assign "^4.1.0"
object.entries "^1.1.0"

eslint-config-airbnb@^18.0.1:
version "18.0.1"
resolved "https://registry.yarnpkg.com/eslint-config-airbnb/-/eslint-config-airbnb-18.0.1.tgz#a3a74cc29b46413b6096965025381df8fb908559"
integrity sha512-hLb/ccvW4grVhvd6CT83bECacc+s4Z3/AEyWQdIT2KeTsG9dR7nx1gs7Iw4tDmGKozCNHFn4yZmRm3Tgy+XxyQ==
dependencies:
eslint-config-airbnb-base "^14.0.0"
object.assign "^4.1.0"
object.entries "^1.1.0"

eslint-config-prettier@^6.3.0:
version "6.3.0"
resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-6.3.0.tgz#e73b48e59dc49d950843f3eb96d519e2248286a3"
integrity sha512-EWaGjlDAZRzVFveh2Jsglcere2KK5CJBhkNSa1xs3KfMUGdRiT7lG089eqPdvlzWHpAqaekubOsOMu8W8Yk71A==
dependencies:
get-stdin "^6.0.0"

eslint-config-react-app@^5.0.2:
version "5.0.2"
resolved "https://registry.yarnpkg.com/eslint-config-react-app/-/eslint-config-react-app-5.0.2.tgz#df40d73a1402986030680c040bbee520db5a32a4"
@@ -3476,7 +3501,7 @@ eslint-plugin-flowtype@3.13.0:
dependencies:
lodash "^4.17.15"

eslint-plugin-import@2.18.2:
eslint-plugin-import@2.18.2, eslint-plugin-import@^2.18.2:
version "2.18.2"
resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.18.2.tgz#02f1180b90b077b33d447a17a2326ceb400aceb6"
integrity sha512-5ohpsHAiUBRNaBWAF08izwUGlbrJoJJ+W9/TBwsGoR1MnlgfwMIKrFeSjWbt6moabiXW9xNvtFz+97KHRfI4HQ==
@@ -3493,7 +3518,7 @@ eslint-plugin-import@2.18.2:
read-pkg-up "^2.0.0"
resolve "^1.11.0"

eslint-plugin-jsx-a11y@6.2.3:
eslint-plugin-jsx-a11y@6.2.3, eslint-plugin-jsx-a11y@^6.2.3:
version "6.2.3"
resolved "https://registry.yarnpkg.com/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.2.3.tgz#b872a09d5de51af70a97db1eea7dc933043708aa"
integrity sha512-CawzfGt9w83tyuVekn0GDPU9ytYtxyxyFZ3aSWROmnRRFQFT2BiPJd7jvRdzNDi6oLWaS2asMeYSNMjWTV4eNg==
@@ -3508,12 +3533,19 @@ eslint-plugin-jsx-a11y@6.2.3:
has "^1.0.3"
jsx-ast-utils "^2.2.1"

eslint-plugin-react-hooks@^1.6.1:
eslint-plugin-prettier@^3.1.1:
version "3.1.1"
resolved "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-3.1.1.tgz#507b8562410d02a03f0ddc949c616f877852f2ba"
integrity sha512-A+TZuHZ0KU0cnn56/9mfR7/KjUJ9QNVXUhwvRFSR7PGPe0zQR6PTkmyqg1AtUUEOzTqeRsUwyKFh0oVZKVCrtA==
dependencies:
prettier-linter-helpers "^1.0.0"

eslint-plugin-react-hooks@^1.6.1, eslint-plugin-react-hooks@^1.7.0:
version "1.7.0"
resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-1.7.0.tgz#6210b6d5a37205f0b92858f895a4e827020a7d04"
integrity sha512-iXTCFcOmlWvw4+TOE8CLWj6yX1GwzT0Y6cUfHHZqWnSk144VmVIRcVGtUAzrLES7C798lmvnt02C7rxaOX1HNA==

eslint-plugin-react@7.14.3:
eslint-plugin-react@7.14.3, eslint-plugin-react@^7.14.3:
version "7.14.3"
resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.14.3.tgz#911030dd7e98ba49e1b2208599571846a66bdf13"
integrity sha512-EzdyyBWC4Uz2hPYBiEJrKCUi2Fn+BJ9B/pJQcjw5X+x/H2Nm59S4MJIvL4O5NEE0+WbnQwEBxWY03oUk+Bc3FA==
@@ -3556,7 +3588,7 @@ eslint-visitor-keys@^1.0.0, eslint-visitor-keys@^1.1.0:
resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-1.1.0.tgz#e2a82cea84ff246ad6fb57f9bde5b46621459ec2"
integrity sha512-8y9YjtM1JBJU/A9Kc+SbaOV4y29sSWckBwMHa+FGtVj5gN/sbnKDf6xJUl+8g7FAij9LVaP8C24DUiH/f/2Z9A==

eslint@^6.1.0:
eslint@^6.1.0, eslint@^6.4.0:
version "6.4.0"
resolved "https://registry.yarnpkg.com/eslint/-/eslint-6.4.0.tgz#5aa9227c3fbe921982b2eda94ba0d7fae858611a"
integrity sha512-WTVEzK3lSFoXUovDHEbkJqCVPEPwbhCq4trDktNI6ygs7aO41d4cDT0JFAT5MivzZeVLWlg7vHL+bgrQv/t3vA==
@@ -3814,6 +3846,11 @@ fast-deep-equal@^2.0.1:
resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz#7b05218ddf9667bf7f370bf7fdb2cb15fdd0aa49"
integrity sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk=

fast-diff@^1.1.2:
version "1.2.0"
resolved "https://registry.yarnpkg.com/fast-diff/-/fast-diff-1.2.0.tgz#73ee11982d86caaf7959828d519cfe927fac5f03"
integrity sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==

fast-glob@^2.0.2:
version "2.2.7"
resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-2.2.7.tgz#6953857c3afa475fff92ee6015d52da70a4cd39d"
@@ -4148,6 +4185,11 @@ get-own-enumerable-property-symbols@^3.0.0:
resolved "https://registry.yarnpkg.com/get-own-enumerable-property-symbols/-/get-own-enumerable-property-symbols-3.0.0.tgz#b877b49a5c16aefac3655f2ed2ea5b684df8d203"
integrity sha512-CIJYJC4GGF06TakLg8z4GQKvDsx9EMspVxOYih7LerEL/WosUnFIww45CGfxfeKHqlg3twgUrYRT1O3WQqjGCg==

get-stdin@^6.0.0:
version "6.0.0"
resolved "https://registry.yarnpkg.com/get-stdin/-/get-stdin-6.0.0.tgz#9e09bf712b360ab9225e812048f71fde9c89657b"
integrity sha512-jp4tHawyV7+fkkSKyvjuLZswblUtz+SQKzSWnBbii16BuZksJlU1wuBYXY75r+duh/llF1ur6oNwi+2ZzjKZ7g==

get-stream@^4.0.0:
version "4.1.0"
resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-4.1.0.tgz#c1b255575f3dc21d59bfc79cd3d2b46b1c3a54b5"
@@ -7627,6 +7669,18 @@ prepend-http@^1.0.0:
resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-1.0.4.tgz#d4f4562b0ce3696e41ac52d0e002e57a635dc6dc"
integrity sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw=

prettier-linter-helpers@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz#d23d41fe1375646de2d0104d3454a3008802cf7b"
integrity sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==
dependencies:
fast-diff "^1.1.2"

prettier@^1.18.2:
version "1.18.2"
resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.18.2.tgz#6823e7c5900017b4bd3acf46fe9ac4b4d7bda9ea"
integrity sha512-OeHeMc0JhFE9idD4ZdtNibzY0+TPHSpSSb9h8FqtP+YnoZZ1sl8Vc9b1sasjfymH3SonAF4QcA2+mzHPhMvIiw==

pretty-bytes@^5.1.0:
version "5.3.0"
resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-5.3.0.tgz#f2849e27db79fb4d6cfe24764fc4134f165989f2"

0 comments on commit 2878818

Please sign in to comment.
You can’t perform that action at this time.