Настройка Visual Studio Code — инструмент веб-разработчика

От AndrewJavaScript

Visual Studio Code — отличный бесплатный инструмент для написания кода.

Рассмотрим основные достоинства:

  1. абсолютно бесплатный продукт от Майкрософт,
  2. он содержит огромное количество плагинов облегчающих труд программиста,
  3. он сам по себе включает много полезных функций
  4. дружелюбный интерфейс.

Скачать Visual Studio Code

Рекомендуемые плагины для установки:

  • All Autocomplete — 
  • Auto Close Tag — автоматически добавляет закрывающие теги
  • Auto Complete Tag — автоматически дополнять теги
  • Auto Rename Tag — автоматически переименовывать парные теги
  • Beautify — помогает правильно форматировать наш код
  • Better Comments —
  • BracketPair — подсвечивает парные скобки разными цветами
  • Code Runner — позволяет запускать наш код, прямо из редактора  кода
  • GitLens — Git supercharged — помощник для работы с Гитом,  показывает изменения кода
  • Import Cost — подсчитывает размер подключаемых библиотек к нашему скрипту
  • JavaScript (ES6) code snippets — облегчает написания кода за счет ввода специальных сокращений, которые автоматически разворачиваются в программные конструкции
  • Live Server — позволяет в два клика создать локальный сервер
  • Multiple clipboards for VSCode  — позволяет выделить несколько блоков в коде
  • Path Autocomplete — помогает вводить пути в коде, которые нам доступны
  • Reactjs code snippets — ввод сниппетов для Reactjs
  • Theme — Oceanic Next — рекомендуемая тема 
  • vscode-icons — показывает красивые иконки к разным типам файлов
  • ESLint — позволяет редактировать код с определенными стилистическими правилами, одной командой можно переформатировать код в другой формат, одновременно проверяя на ошибки.
  • jshint — подсказывает наши ошибки и недочеты, налету можно видеть свои ошибки

NodeJS — серверная технология написанная на JavaScript, по сути это аналог PHP.

Установить NodeJS, в него входит менеджер пакетов NPM — позволяет устанавливать и скачивать много плагинов, которые сделают нашу работу удобной.

Установка  JSHint

Для глобальной установки  JSHint, необходимо в VSCode открыть терминал и выполнить команду

npm install -g jshint

<CTRL> + <J> — вызов нижней панели,  либо через меню

View -> Appearance -> Show Panel

Настройка JSHint под себя

Необходимо создать файл настройки .jshintrc

{
"camelcase" : true,
"indent": 2,
"undef": true,
"quotmark": false,
"maxlen": 120,
"trailing": true,
"curly": true,
"strict": false,
"browser": true,
"devel": true,
"jquery": true,
"esversion": 8
}

Описание всех настроек JSHint

Для того, чтобы красиво отформатировать код в VSCode

Выделить фрагмент кода и нажать <CTRL + <F> , либо правой кнопкой мыши и выбрать Format Document