Javascript extensions vs code

10 Best VS Code extensions for JavaScript

A vanilla code editor like Visual Studio Code (VS Code) gets you far in development. But if you want to write code faster and make fewer mistakes, then you need to make use of its vast library of extensions that are available in the marketplace.

There are thousands of different VS Code extensions available for your language of choice e.g. JavaScript, TypeScript, or Python. So it becomes really tough to find the right extension without trying them all.

I’ve tested more than hundreds of extensions for JavaScript for this blog post and curated my findings to a list that contains the 10 best VS Code extensions for JavaScript to save your time.

Here are the 10 best VS Code extensions for JavaScript:

What are the best VS Code extensions for JavaScript?

Here are my top picks for the best vs code extensions for JavaScript that you should try out in your code editor.

1. JavaScript (ES6) code snippets

This VS Code extension adds a whole bunch of JavaScript code snippets that are easily accessible using shortcuts.

You can configure the extension to automatically fix the issues when you hit save in the VS Code editor. Here are the settings that I’m using for this extension, so it will automatically fix the ESLint findings:

 "editor.codeActionsOnSave": < "source.fixAll.eslint": true >, "eslint.alwaysShowStatus": true, "eslint.format.enable": true, "eslint.run": "onSave", "eslint.validate": [ "javascript" ], "eslint.workingDirectories": [ < "mode": "auto" >],

3. DotEnv

The DotEnv VS Code extension adds syntax highlight to .env variables. In my projects, I make a lot of use of .env variables. So having syntax highlight on these files makes me less prone to mistakes and allows me to read the environment variables a lot quicker compared to a file with only grey text.

4. JavaScript Booster

Javascript booster is an extension that adds various quick fixes when you’re editing code in JavaScript. The default “quick fix” helper in VS Code isn’t really usefull and contains a limited set of fixes.

Enabling this extension adds 33 quick fixes for the most common issues like fixing declarations e.g. converting var/const to let or converting shorthand arrow functions to statements.

Additionally, it grants the user the ability to perform git actions such as commit, merge, revert, checkout, rebase, rename and reset branches. Having the ability to do this from a single overview within VS Code improves productivity tremendously and doesn’t get you out of your flow.

10. GitHub Copilot

The GitHub Copilot VS Code extension couldn’t be left out on this list. This is essentially an AI pair programmer that gives suggestions on what it thinks you’re going to write in your code. It can even write complete methods and classes for you.

But how is the AI able to do that? GitHub Copilot has been trained on billions of lines of public code on GitHub using Open AI (machine learning). So it has been trained to recognize patterns and with that knowledge, it’s able to determine what the developer is going to create in code.

In my experience, I notice that when the JavaScript projects grow bigger over time, the better GitHub copilot becomes in predicting what kind of code I want to write. See the following example to get an understanding of how powerful AI pair programming can be.

Источник

Топ VSCode расширений, которые ускорят вашу разработку на JavaScript

VSCode — это кроссплатформенный редактор с открытым исходным кодом, ставший любимым среди программистов, особенно среди веб-разработчиков. Он быстрый, расширяемый и имеет массу возможностей и настроек. Если вы до сих пор не работали с ним, то советую попробовать.

Для VSCode созданы тысячи расширений. Я намерен представить несколько из них, которые использую каждый день. Приступим!

Quokka.js

Quokka.js — это плагин для JavaScript и TypeScript, который отображает результаты выполнения кода в редакторе, непосредственно во время его написания. Попробуйте сами!

Установив расширение, нажмите Ctrl/Cmd(⌘) + Shift + P, чтобы запустить палитру команд редактора, и затем введите Quokka, чтобы увидеть список доступных команд плагина. Выберите и запустите команду New JavaScript File или нажмите ⌘ + K + J, чтобы создать новый файл. Любой введенный код будет выполнен немедленно.

Bracket Pair Colorizer & Indent Rainbow

Квадратные и круглые скобки — неотъемлемая часть многих языков программирования. В таком языке как Javascript, простая станица может иметь целый поток этих символов, среди которых тяжело отличить пары открытых и закрытых скобок. В этот момент на помощь приходят Bracket Pair Colorizer и Indent Rainbow. Это два разных расширения. Однако, вместе они представляют отличную комбинацию. Эти расширения наполнят ваш редактор морем красок, сделают блоки кода отличимыми друг от друга и придадут им приятный вид.

Без Bracket Pair Colorizer и Indent Rainbow

Установив Bracket Pair Colorizer и Indent Rainbow

Сниппеты

Сниппеты — это сокращения в редакторе, трансформируемые в полноценный код. Вместо import React from ‘react’; пишем imr и жмем Tab, чтобы развернуть сниппет. В частности, clg разворачивается в console.log .

Существует множество сниппетов для разных направлений: JavaScript (или другие языки), React, Redux, Angular, Vue, Jest. Лично я считаю JavaScript сниппеты очень полезными, особенно с тех пор как начал работать преимущественно с JS.

Несколько хороших расширений со сниппетами:

Todo Highlighter

Часто бывает, написав функцию, вы понимаете, что есть лучший способ написать то же самое. Вы оставляете комментарий // TODO: Необходим рефакторинг , но затем забываете об этом и выкладываете код в production. C Todo Highlighter подобного не произойдет.

Плагин выделяет TODO/FIXME или другие комментарии в яркие цвета, что довольно тяжело не заметить. Модное нововведение Todo Highlighter — список выделенных комментариев, который выводится в консоли.

Todo Highlighter

Import Cost

Это расширение позволяет увидеть размер импортируемых модулей. Вы сможете понять, в каком месте вы импортируете библиотеку целиком, а в каком конкретную ее часть. Это окажет неоценимую помощь со сборкой проекта в Webpack.

Rest Client

Веб-разработчики часто взаимодействуют с различного рода REST API. Для изучения ссылок и проверки ответов на запрос, применяют такие инструменты как Postman. Так зачем использовать отдельное приложение, когда можно то же самое сделать в редакторе? Поприветствуйте Rest Client. Он позволяет отправлять HTTP-запросы и просматривать ответ непосредственно в Visual Studio Code.

Auto Close Tag & Auto Rename Tag

С приходом React и той популярностью, которую он набрал за последние несколько лет, HTML-подобный синтаксис, в виде JSX, стал последним писком моды. Любому веб-разработчику быстро надоест вручную писать теги в JS файлах. В таком случае, нам необходим инструмент, который сможет быстро и легко генерировать теги. Emmet — очень полезный плагин, решающий данную задачу. Однако, иногда нам хочется чего-то более простого и лаконичного. Нам бы пригодилось расширение, которое будет добавлять закрывающий тег к его открытой паре, и автоматически изменять закрывающий тег, когда вы изменяете открывающий. Существует два расширения, которые могут справиться с поставленными задачами.

Они также работают с JSX и множеством других языков (XML, PHP, Vue, JavaScript, TypeScript, TSX).

GitLens

Со слов автора, GitLens расширяет возможности Git, встроенного в Visual Studio Code. Плагин включает удивительное количество функций, таких как указание автора, поиск коммитов, история и проводник. Вы можете изучить полное описание этих возможностей здесь. Если вы работаете с Git, то вы обязаны установить этот плагин.

Существуют другие расширения, выполняющие специфические задачи. Если GitLens оказался для вас слишком объемным или вам не требуется большая часть его функций, то советую взглянуть на следующий список:

• Git History — отображает красивый граф истории коммитов. Рекомендуется.
• Git Blame — позволяет увидеть информацию о текущей строке. Похожая функция встроена в GitLens.
• Git Indicators — позволяет увидеть изменения в файлах и количество добавленных и удаленных строк.
• Open in GitHub / Bitbucket / GitLab / VisualStudio.com — дает возможность, одной командой, открыть репозиторий в браузере.

Git Project Manager

GPM позволяет открыть окно с новым репозиторием напрямую из редактора. Проще говоря, вы можете открыть другой репозиторий не покидая VSCode.

После установки данного расширения, пропишите gitProjectManager.baseProjectsFolders в список адресов, содержащих репозитории.

Indenticator

Визуально выделяет текущую глубину отступа. С этим плагином, вы легко различите блоки, расположенные на разных уровнях.

VSCode Icons

Новые иконки придадут редактору привлекательности!

Dracula (Theme)

Полюбившийся мне внешний вид.
Dracula theme

Другие плагины, которые могут вам пригодиться:

• Fira Code — моноширинный шрифт с лигатурами для программистов;
• Live Server — локальный сервер. Включает динамическоую перезагрузку для статических и динамических страниц;
• Prettier for VSCode — плагин для форматирования кода;
• Settings Sync — позволяет сохранять пользовательские настройки, расширения и сочетания клавиш. Такая возможность позволит установить VSCode на другом устройстве в течении нескольких минут, и не потерять конфигурацию;
• Multiple clipboards for VSCode — переопределяет стандартные команды «выделить» и «вырезать». Добавляет возможность скопировать несколько блоков текста в единый буфер.

Источник