iltonkp/Configurando-VSCode-para-Angular

Padronização de ambiente de desenvolvimento para projetos angular

Configuração de Plugins para o Vscode e Inicialização do Eslint para Projetos Angular

😱 Desafio Proposto

Melhorar o experiência de desenvolvimento da equipa utilizando um lint para padronizar o código fonte da aplicação. Aceitei o desafio e aqui estou criando esse documento para mostrar todos os passos realizados até alcançar o objetivo.

1º Passo: Vamos iniciar instalando alguns plugins e configurar o VSCode.

❤️ Instalando Plugins

• EditorConfig for VS Code

• Prettier - Code formatter

• Material Icon Theme

• ESLint

• Dracula Official

• GitLens — Git supercharged

🔥 Configurando settings.json

{
  "workbench.startupEditor": "newUntitledFile",
  "terminal.integrated.fontSize": 14,
  "editor.tabSize": 2,
  "editor.fontSize": 14,
  "editor.lineHeight": 24,
  "editor.fontFamily": "Fira Code",
  "editor.fontLigatures": true,
  "explorer.compactFolders": false,
  "editor.renderLineHighlight": "gutter",
  "workbench.editor.labelFormat": "short",
  "extensions.ignoreRecommendations": true,
  "javascript.updateImportsOnFileMove.enabled": "never",
  "typescript.updateImportsOnFileMove.enabled": "never",
  "breadcrumbs.enabled": true,
  "editor.parameterHints.enabled": false,
  "explorer.confirmDragAndDrop": false,
  "explorer.confirmDelete": false,
  "editor.rulers": [80, 120],
  "editor.formatOnSave": true,
  "enableTelemetry": true,
  "emmet.syntaxProfiles": {
    "javascript": "jsx"
  },
  "emmet.includeLanguages": {
    "javascript": "javascriptreact"
  },
  "[javascript]": {
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    }
  },
  "[javascriptreact]": {
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    }
  },
  "[typescript]": {
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    }
  },
  "[typescriptreact]": {
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    }
  },
  "workbench.colorTheme": "Dracula"
}

2º Passo: Configurar o EditorConfig.

🤓 Configurando EditorConfig

• Generate EditorConfig

• Configurando .editorconfig

root = true

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

🤓 Configurando ESlint

• Instalação

npm i --save-dev eslint

• Iniciando Configurações

./node_modules/.bin/eslint --init

• Intalando Dependências Prittier

npm i --save-dev eslint-config-prettier eslint-plugin-prettier eslint-import-resolver-typescript

• eslinrc.json

{
  "env": {
    "browser": true,
    "es6": true
  },
  "extends": [
    "airbnb-base",
    "plugin:@typescript-eslint/eslint-recommended",
    "prettier/@typescript-eslint",
    "plugin:prettier/recommended",
    "plugin:@typescript-eslint/recommended"
  ],
  "globals": {
    "Atomics": "readonly",
    "SharedArrayBuffer": "readonly"
  },
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": 11,
    "sourceType": "module"
  },
  "plugins": ["@typescript-eslint", "prettier"],
  "rules": {
    "@typescript-eslint/explicit-module-boundary-types": "off",
    "prettier/prettier": ["error", { "singleQuote": true, "parser": "flow" }],
    "class-methods-use-this": "off",
    "@typescript-eslint/camelcase": "off",
    "no-useless-constructor": "off",
    "@typescript-eslint/no-unused-vars": [
      "error",
      { "argsIgnorePattern": "_" }
    ],
    "@typescript-eslint/interface-name-prefix": [
      "error",
      { "prefixWithI": "always" }
    ],
    "import/extensions": [
      "error",
      "ignorePackages",
      {
        "ts": "never"
      }
    ]
  },
  "settings": {
    "import/resolver": {
      "typescript": {}
    }
  }
}

• eslinignore.json

 /*.js
  node_modules
  dist
  assembly
  e2e

• prettier.config.js

module.exports = {
  singleQuote: true,
  trailingComma: "all",
  arrowParens: "avoid",
};