Настройка VS Code

Как настроить VS Code с нуля до идеального инструмента для разработки на JavaScript

Недавно у меня появился новый Mac (MacBook Air), и мне пришлось установить новый VS Code, поэтому я нашел время, чтобы задокументировать то, что я сделал, чтобы мой опыт кодирования был эквивалентен моему старому MacBook Pro, который просуществовал огромное количество 9 годы.

Смотри мойВведение в VS Codeпост тоже

Вот что я сделал:

  1. Я установилКод Фираи установите его как мое семейство шрифтов
  2. Я установил размер вкладки на 2 (это моя религия). Пространства. 2 места.
  3. я добавил**/node_modulesв исключенные файлы, чтобы они не отображались в списке файлов.
  4. Я включилФорматировать при вставкеиФорматировать при сохранении
  5. Включенолигатуры шрифтов
  6. Отключена миникарта
  7. ВключеноОбрезать конечные пробелы
  8. Я установилПлагин Sublime Text Keymap. Это даетcmd-K cmd-Bярлык для отображения / скрытия боковой панели,cmd-Wзакрыть файл и многое другое.

Затем я установил несколько тем. Это зависит от вашего вкуса. Мне нравится переключаться между

  • Тема Palenight
  • Ностромо
  • Ночная Сова
  • Аю

Затем я установил эти расширения:

  • Красивее
  • IntelliSense для имен классов CSS
  • Намерение 4-к-2
  • ESLint
  • Повторяющееся действие
  • Bracket Pair Colorizer 2
  • ВавилонES6 / ES7
  • ES7 React /Redux/GraphQL/ React-Native сниппеты
  • TODO Highlight

Это хороший набор для начала работы с JavaScript и React.

Это мои пользовательские настройки JSON после настройки всего на свой вкус и потребности:

{
    "editor.fontFamily": "Fira Code",
    "editor.tabSize": 2,
    "editor.wordWrap": "bounded",
    "files.exclude": {
        "**/node_modules": true
    },
    "editor.formatOnPaste": true,
    "editor.formatOnSave": true,
    "editor.minimap.enabled": false,
    "workbench.colorTheme": "Tomorrow Night Blue",
    "files.trimTrailingWhitespace": true,
    "workbench.activityBar.visible": false,
    "window.zoomLevel": 2,
    "editor.cursorBlinking": "smooth",
    "editor.fontLigatures": true,
    "prettier.jsxBracketSameLine": true,
    "prettier.jsxSingleQuote": true,
    "prettier.singleQuote": true,
    "prettier.semi": false,
    "[markdown]": {
        "editor.renderWhitespace": "all",
        "editor.acceptSuggestionOnEnter": "off",
        "editor.parameterHints.enabled": false,
        "editor.quickSuggestions": false,
        "editor.snippetSuggestions": "none",
    }
}

В[markdown]Раздел добавляет конфигурацию, специфичную для Markdown. В этом случае я отключаю все всплывающие окна, которые отвлекают меня во время написания, которые в противном случае полезны при кодировании.

Вот и все.

Также проверьтеНастройка VS Code для разработки на React!

Удачного кодирования!


Больше руководств по инструментам разработчика: