Siga algumas dicas para trabalhar com vscode<\/p>\n
Muda toda a colora\u00e7\u00e3o das fontes e tamb\u00e9m o vscode, um tema mais escuro e muito interessante.<\/p>\n
Extens\u00e3o para transfor\u00e7ar caracteres em formas geom\u00e9tricas. Basta pesquisar no gogole, baixar e instalar as fontes.
\nDepois acesse as configura\u00e7\u00f5es com o comando Ctrl + Shift + P, digite settings e selecione a op\u00e7\u00e3o de configura\u00e7\u00f5e do usu\u00e1rio em formato json.<\/p>\n
Adicione a seguinte configura\u00e7\u00e3o:<\/p>\n
\r\n"editor.fontFamily": "Fira Code", -> Adicona as fonte\r\n"editor.fontLigatures" : true, -> Ativa o recurso de substituir caracteres por s\u00edmbolos.\r\n<\/pre>\nTalez seja necess\u00e1rio reiniciar o vscode.<\/p>\n
vscode-icons<\/h3>\n
Adiciona na sidebar o \u00edcone representando a extens\u00e3o do arquivo, ficando muito mais f\u00e1cil de identicar nossos arquivos no projeto.
\nPara instalar basta acessar “View -> Extensios” ou Ctrl + Shift + x, pesquise por vscode-icons<\/strong> identifique e instale.<\/p>\nColor Highlight<\/h3>\n
vscode-ext-color-highlight<\/strong>
\nEssa extens\u00e3o possibilita que quando uma cor for digitada em hexadecimal ou rgba o texto digitado aparece circulado com a cor correspondente.<\/p>\nEditorConfig for VS Code<\/h3>\n
Permite confiugrar o editor entre todos os desenvolvedores do time, vai padronizar para todos.<\/p>\n
ESLint<\/h3>\n
Garante que mantenha padr\u00f5es dentro do projeto, aspas simples, aspas duplas, nomes de vari\u00e1vel, nomes de fun\u00e7\u00f5es etc.<\/p>\n
Prettier – Code formatter<\/h3>\n
Garante com que as regras do ESLint seja aplicada de forma autom\u00e1tica. \u00c9 indicado a configura\u00e7\u00e3o editor “.formatOnSave” estar ativa.
\nAssim que salvar o prettier pega as regras que definimos no ESLint, ex: n\u00e3o quero que ningu\u00e9m utilize aspas simples, somente aspas duplas. E pode criar v\u00e1rias outras regras.<\/p>\nConfigura\u00e7\u00f5es<\/h2>\n
Fonte:<\/h3>\n
\r\n"editor.fontFamily" : "Nome da Fonte", -> Fonte desejada.\r\n"editor.fontLigatures" : true, -> Transformar caract\u00e9res em s\u00edmbolos (a fonte precisa oferecer esse recurso)\r\n"editor.fontSize": 18, -> Tamanho da Fonte\r\n"editor.lineHeight" : 24, -> Altura de Linha\r\n"editor.formatOnSave" : true, -> Formatar e identar o arquivo de acordo com os padr\u00f5es de c\u00f3digo (eslint garante o padr\u00e3o)\r\n"editor.rulers" : [80,120] -> Indica o n\u00famero de colunas limite do arquivo, pode passar de 80, mas n\u00e3o pode passar de 120.\r\n"editor.renderLineHighlight" : "gutter", -> Indica a linha corrente na barra lateral apenas circulando o n\u00famero e n\u00e3o selecionando a linha toda.\r\n"terminal.integrated.fontSize" : 14, -> Tamanho da fonte do terminal integrado no vscode.\r\n"emmet.syntaxProfiles": {\r\n "javascript": "jsx" -> Cria o recurso de gera\u00e7\u00e3o de c\u00f3digo tamb\u00e9m para arquivos javascript. Ex: div.teste, cria-se <div id="teste"><\/div>\r\n}\r\n"emmet.includeLanguages" : {\r\n "javascript" : "javascriptreact" -> Dentro do react existem palavras reservadas como class, portanto n\u00e3o posso escrever html e essa configura\u00e7\u00e3o nos permite escrever e depois substitui por className.\r\n}\r\n"javascript.updateImportOnFileMove.enabled" : "never", -> Previne que o editor altere os importes automaticamente quando movermos um arquivo, as vezes acaba atrapalhando o desenvolvimento.\r\n"breadcrumbs.enabled" : true, -> Exibe no topo do editor o caminho do arquivo corrente.\r\n"editor.parameterHints.enabled" : false, -> Evita que exiba a documenta\u00e7\u00e3o automaticamente, com muito conte\u00fado.\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"Siga algumas dicas para trabalhar com vscode Temas Dracula Muda toda a colora\u00e7\u00e3o das fontes e tamb\u00e9m o vscode, um tema mais escuro e muito interessante. Extens\u00f5es: FiraCode Extens\u00e3o para transfor\u00e7ar caracteres em formas geom\u00e9tricas. Basta pesquisar no gogole, baixar e instalar as fontes. Depois acesse as configura\u00e7\u00f5es com o comando Ctrl + Shift + […]<\/p>\n","protected":false},"author":1,"featured_media":472,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[131,132],"tags":[224,135,133],"class_list":["post-469","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ide","category-vscode","tag-react","tag-react-native","tag-vscode","cat-131-id","cat-132-id","has_thumb"],"_links":{"self":[{"href":"http:\/\/hackerzone.com.br\/blog\/wp-json\/wp\/v2\/posts\/469","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/hackerzone.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/hackerzone.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/hackerzone.com.br\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/hackerzone.com.br\/blog\/wp-json\/wp\/v2\/comments?post=469"}],"version-history":[{"count":1,"href":"http:\/\/hackerzone.com.br\/blog\/wp-json\/wp\/v2\/posts\/469\/revisions"}],"predecessor-version":[{"id":471,"href":"http:\/\/hackerzone.com.br\/blog\/wp-json\/wp\/v2\/posts\/469\/revisions\/471"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/hackerzone.com.br\/blog\/wp-json\/wp\/v2\/media\/472"}],"wp:attachment":[{"href":"http:\/\/hackerzone.com.br\/blog\/wp-json\/wp\/v2\/media?parent=469"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/hackerzone.com.br\/blog\/wp-json\/wp\/v2\/categories?post=469"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/hackerzone.com.br\/blog\/wp-json\/wp\/v2\/tags?post=469"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}