Rocketseat - Modulo 02 - Video 06:ESLint, Prettier e EditorConfig

.. Modulo01-Video06-ESLint, Prettier e EditorConfig.md

INSTALACAO

yarn add eslint -D

RUN

yarn eslint --init
    3 > To check syntax, find problems, and enforce code style
    2 > Javascript modules (import/export)
    3 > None of these
    2 > Apenas NODE
    1 > Use a popular style guide
    1 > Airbnb  
    1 > JavaScript
    Y > Yes, (instalar with npm)

remover arquivo do npm: package-lock.json
yarn //atualizar as dependencias

REQUISITO PARA FUNCIONAR NO VSCODE

Necessita ter a extensao instalada
https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

Fazer com o ESLint rode ao salvar, corrigindo o codigo automaticamente

Instala o Prettier no desenvolvimento

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

Alterar o arquivo eslintrc.js

Adicionar o arquivo .prettierrc

aplica as correcoes em todos os arquivos JS na pasta SRC

yarn eslint --fix src --ext .js

Plugin EditorConfig para o VSCode

Gerar arquivo de configuracao, conforme anexo ou commit

DICAS do grupo do DISCORD

Se estiver usando prettier, é só adicionar essa linha nos settings.json:   
"prettier.singleQuote": true
ou false, se não quiser aspas simples

.editorconfig

root = true

[*]
indent_style = space
indent_size = 2
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

.eslintrc.js

module.exports = {
  env: {
    es6: true,
    node: true,
  },
  extends: [
    'airbnb-base', 'prettier'
  ],
  plugins : ['prettier'],
  globals: {
    Atomics: 'readonly',
    SharedArrayBuffer: 'readonly',
  },
  parserOptions: {
    ecmaVersion: 2018,
    sourceType: 'module',
  },
  rules: {
    "prettier/prettier": "error",
    "class-methods-use-this": "off",
    "no-param-reassign": "off",
    "camelcase": "off",
    "no-unused-vars": ["error", { "argsIgorePattern": "next" }],
  },
};

.prettierrc

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

~Library-Application Support-Code-User-settings.json

{
  "workbench.colorTheme": "Dracula",
  "editor.fontFamily": "Fira Code",
  "editor.fontLigatures": true,
  "editor.fontSize": 12,
  "editor.lineHeight": 18,
  "workbench.iconTheme": "material-icon-theme",
  "editor.rulers": [
    80,
    120
  ],
  "editor.formatOnSave": false,

  "eslint.autoFixOnSave": true,
  "eslint.validate": [
    {
      "language": "javascript",
      "autoFix": true
    },
    {
      "language": "javascriptreact",
      "autoFix": true
    },
    {
      "language": "typescript",
      "autoFix": true
    },
    {
      "language": "typescriptreact",
      "autoFix": true
    }
  ],

  "editor.tabSize": 2,
  "editor.renderLineHighlight": "gutter",
  "terminal.integrated.fontSize": 12,
  "emmet.syntaxProfiles": {
    "javascript": "jsx"
  },
  "emmet.includeLanguages": {
    "javascript": "javascriptreact"
  },
  "javascript.updateImportsOnFileMove.enabled": "never",
  "breadcrumbs.enabled": true,
  "editor.parameterHints.enabled": false,
  "vsicons.dontShowNewVersionMessage": true,
  "prettier.eslintIntegration": true,
  "workbench.startupEditor": "newUntitledFile",
  "window.zoomLevel": 0
}