Работа на языке JavaScript в Visual Studio Code

At the very beginning

Мы возьмем VS Code как редактор для разработки на JavaScript (в частности React и ReactNative, так как платформа выглядит мощной и популярной). Вообще если отвлечься от конкретного языка VS Code это качественный текстовый редактор с огромными возможностями и потенциалом к расширению. Существует множество различных инструментов и плагинов, призванных помочь нам в работе. Попробуем их обуздать.

Редактор бесплатный, его можно скачать с официального сайта, там же можно найти документацию, FAQ, расширения и многое другое. Сообщество пользователей очень велико. Редактор является программным обеспечением с открытым исходным кодом и большинство расширений к нему — тоже. Это значит, что теоретически любой разработчик может принять участие в разработке самого инструмента.

Сам редактор приятен в пользовании как визуально, так и в плане удобства.

Create New

Следите за руками. Открываем VS Code, сочетание клавиш Ctrl+N создает новый файл (пока просто текстовый) хорошо, жамкаем Ctrl+K,M (такое сочетание означает, что надо сначала зажать вместе клавиши Ctrl и K, а затем отпустить их и нажать клавишу M), и выбираем язык на котором будем писать, редактор соответственно постарается помочь нам подсветкой и чем еще сможет. Начинаем набирать func, срабатывает автодополнение (это часть технологии IntelliSense) до function (применяется через Tab или Enter). Автодополнение позволяет значительно меньше набирать и снижает количество ошибок.

ES Lint

Пока все идет хорошо. Но, JS знаменит тем, что на нем можно в редакторе творить жуткое, а ошибки ловить только при запуске и потом долго и с наслаждением их искать (привет динамическая типизация). Есть плагин ESLint, который по сути просто использует одноименный инструмент. Linting - это проверка соблюдения стандарта оформления кода. ES - это язык ECMA Script стандартизированный международной организацией ECMA в спецификации ECMA-262, расширением которого и является JS. По сути плагин проверяет, что написанное нами соответствует стандарту языка, но мы можем настраивать эту проверку.

Это первый плагин, который мы поставим. Есть 2 способа сделать это. Во-первых, есть онлайн магазин расширений для VSCode, воспользовавшись поиском можно найти любой требуемый плагин и нажать кнопочку install. Но зачем куда-то ходить, marketplace есть прямо в редакторе!

Если нажать сочетание клавиш Ctrl+Shift+X или кнопку на панели слева, откроется панель поиска расширений. Можно ввести в строке поиска 'ESLint', нажать на иконку плагина в списке результатов и тогда откроется домашняя страничка этого плагина с исчерпывающей информацией о нем. Здесь, для установки также следует нажать кнопочку install.

Плагин есть, но нет той библиотеки, которую он использует. Тут нам надо познакомиться с еще одним источником инструментов для разработки на JS. Наверно, тут не место отвлекаться на тему, что такое сторонний код, библиотеки и пакетные менеджеры. В сообществе JS, если вы хотите использовать кем-то написанный код (а на JS вам буквально придется это делать), вы можете использовать npm. [Тут]({% post_url 2020-05-06-windows-installing-node %}) отдельная статья как эту штуку установить.

Теперь когда у нас есть npm можем ставить пакеты!

npm install -g eslint

Опция -g говорит пакетному менеджеру поставить пакет не в какой-то конкретный проект, а глобально.

А это плагины, которые конфигурируют eslint. Без них (по умолчанию) eslint ничего не проверяет. (будем следовать Airbnb code style)

npm install -g eslint-config-airbnb-base eslint-plugin-import eslint-plugin-react

Это конфиг который должен лежать в папке нашего проекта .eslintrc.json:

{
  "env": {
    "browser": true,
    "es6": true
  },
  "extends": "airbnb-base", //используем правила airbnb
  "globals": {
    "Atomics": "readonly",
    "SharedArrayBuffer": "readonly"
  },
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true //это вместе с React идет
    },
    "ecmaVersion": 2018,
    "sourceType": "module"
  },
  "plugins": [
    "react" //опционально
  ],
  "rules": {
    //но немного расширяем их под свой вкус
    "linebreak-style": 0, //поскольку мы на Win работаем
    "no-plusplus": "off", //хочется мочь писать "i++"
    "indent": ["error", 4], //отступы у меня в 4 пробела
    "object-curly-spacing": ["error", "always", { "objectsInObjects": false }]
    // позволяет писать { value: { value: 1}}
  }
}

В принципе его можно создать при помощи мастера настройки по команде

eslint --init

Можно вообще положить конфиг в папку %UserName% и VSCode будет читать оттуда. Подробное описание конфигурации и всех правил можно найти на официальном сайте

Prettier

Еще очень хочется не парится насчет пробелов, табов, переносов, скобок и такого прочего, писать себе подряд и, если что-то пошло вразнобой, автоматом поправить с помощью какого-то инструмента. В принципе, ES Lint частично уже делает это за нас, но с Prettier как-то побаче.

Ставим одноименный плагин, в настройках выставляем галку prettier.eslintIntegration, чтобы линтер с форматером не воевали, чей стиль лучше. Если редактор вдруг не спросит какой форматер использовать по умолчанию для JS, указываем

"[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    }

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

Personal Access Token

Буду исходить из предположения, что аккаунт на GitHub у Вас есть. Теперь нужно завести токен. Идем в Settings → Developer Settings → Personal Access Tokens. Обзываем понятным образом и обязательно ставим галочку gist.

Нажимаем Generate и далее обязательно копируем его куда-нибудь, больше нам этот токен не покажут.

Settings Sync Extension

Ставим одноименное расширение для VS Code. Время залить свои первые настройки! Ctrl+Shift+P Вызывает командную консоль, в ней можем набрать >Sync и выбрать команду Upload (либо Shift + Alt + U прямо из редактора). При первом вызове расширение попросит ввести token, который мы заботливо сохранили на предыдущем шаге. А при успешной загрузке настроек вернет GistID, который тоже надо сохранить, чтобы иметь возможность скачать эти настройки на другой машине.

Если ввести ссылку вида https://gist.github.com/{your_userName}/{gist_id} можно посмотреть те самые настройки (или просто зайти на Gist будучи залогиненым на GitHub)

Можно поставить расширение Gist для VS Code и прямо из редактора загружать или скачивать различные файлы. В том числе можно сохранить свой файл .eslintrc.

Опциональные расширения

Auto Close Tag - автоматически добавляет закрывающий тэг
Auto Rename Tag - автоматически переименовывает парный тэг
Color highlight - подсветка шестнадцатеричных кодов цветов
Codestream - интересное расширение для совместной работы над кодом
GitLens - git аннотации
ToDo Tree - подсветка и навигация по меткам ToDo

А вообще вот поиск

ни в чем себе не отказывайте)