Configuração do VScode com as principais extensões

Configuração do VScode com as principais extensões

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/e02e7c7e-f47c-4754-9dd9-f14635adc94b/Untitled.png

Configuração do ambiente

Vamos preparar a nossa nave de desenvolvimento

Sem mais delongas, vamos ao conteúdo principal desse artigo: configuração do seu ambiente.

REQUISITOS PRINCIPAIS

  • Node + NPM
  • Yarn
  • Visual Studio e Configurações adicionais

Extensões

  • Code Spell Checker: Essa extensão faz a correção ortográfica no nosso código, funcionando melhor com camelcase (por padrão, corrige apenas o inglês). Essa extensão é bastante útil mas é totalmente opcional;
  • Portuguese – Code Spell Checker: É um dicionário de português para que a extensão Code Spell Checker consiga fazer também a correção ortográfica em Português;
  • Color Highlight: Essa extensão reconhece cores CSS escritas em qualquer lugar do nosso código. Por padrão reconhece apenas cores em hexadecimal mas você pode configurar para reconhecer cores no formato de palavras como "red" ou "yellow". É uma extensão bastante útil, já que reconhece as cores diretamente no código;
  • CSS Modules: Essa é uma extensão que fornece o autocomplete para CSS Modules. Recomendamos o uso dela já que vai te ajudar com o autocomplete;
  • Github Copilot: O GitHub Copilot é um AI pair programmer que sugere complementos de linha e corpos de função inteiros conforme você digita. O GitHub Copilot é alimentado pelo sistema OpenAI Codex AI, treinado em texto público da Internet e bilhões de linhas de código.
  • vscode-styled-components: Essa extensão fornece o syntax highlighting e intelliSense para a biblioteca styled-components. Se você for utilizar essa biblioteca, o uso da extensão é bastante recomendado.
  • Rocketseat ReactJS e **Rocketseat React Native: Estes plugins disponibiliza um conjunto de Snippets ou atalhos para criação de componentes e arquivos de configuração em aplicações ReactJS e React Native.**
  • Omni Theme: Um tema para deixar o seu vscode mais bonito e agradavel.

Configurações Adicionais do VS Code

As próximas configurações podem ser acessadas no VS Code basta apertar as teclas Ctrl + Shift + P ou no MacOS cmd +, digite Preferences: Open Settings (JSON).

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/9af2154a-0f8f-4a28-ab9c-178ae6f0fa4e/Untitled.png

No arquivo JSON que abriu, adicione as seguintes configurações (adicione dentro das chaves {}):

"terminal.integrated.fontSize": 14,

"editor.tabSize": 2,
"editor.fontSize": 16,
"editor.lineHeight": 26,
"editor.semanticHighlighting.enabled": false,

"editor.rulers": [80, 120],

"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true
},

"files.exclude": {
  "**/.git": true,
  "**/.svn": true,
  "**/.hg": true,
  "**/CVS": true,
  "**/.DS_Store": true,
  // "**/node_modules": true
},

"files.associations": {
  ".sequelizerc": "javascript",
  ".stylelintrc": "json",
  ".prettierrc": "json",
  "*.tsx": "typescriptreact"
},

"typescript.tsserver.log": "verbose",
"material-icon-theme.activeIconPack": "nest",

"material-icon-theme.folders.associations": {
  "infra": "app",
  "entities": "class",
  "domain": "class",
  "schemas": "class",
  "typeorm": "database",
  "repositories": "mappings",
  "http": "container",
  "migrations": "tools",
  "modules": "components",
  "implementations": "core",
  "dtos": "typescript",
  "fakes": "mock",
  "websockets": "pipe",
  "protos": "pipe",
  "grpc": "pipe",
  "providers": "include",
  "subscribers": "messages",
  "useCases": "controller",
  "kafka": "scripts",
  "mappers": "meta",
  "_shared": "shared",
  "eslint-config": "tools",
  "kube": "kubernetes"
},

"material-icon-theme.files.associations": {
  "ormconfig.json": "database",
  "tsconfig.json": "tune",
  "*.proto": "3d",
  "*.webpack.js": "webpack"
},
"window.menuBarVisibility": "toggle",
"tabnine.experimentalAutoImports": true,
"cSpell.enableFiletypes": [
  "!asciidoc",
  "!c",
  "!cpp",
  "!csharp",
  "!go",
  "!handlebars",
  "!haskell",
  "!jade",
  "!java",
  "!latex",
  "!php",
  "!pug",
  "!python",
  "!restructuredtext",
  "!rust",
  "!scala",
  "!scss"
],
"cSpell.language": "en,pt",
"editor.suggestSelection": "first",
"cSpell.userWords": [
  "chakra",
  "middlewares",
  "prefetch"
],
"workbench.productIconTheme": "fluent-icons",
"terminal.integrated.showExitAlert": false,

"splitHTMLAttributes.closingBracketOnNewLine": true,
"window.zoomLevel": 1

Company

PostsCareersContato

Install App

©2022 Aleksander Palamar. All rights reserved | CNPJ 26.328.604/0001-55