Настройка visual studio code (vs code) для разработчика 2020

Если прошлая статья про Sublime Text вам не зашла, так как Вы любитель VS Code. Тогда представляем наши настройки для редактора Visual Studio Code актуальные на 2020 год и далее. Редактор получится очень красивым и удобным, Вы без проблем сможете разрабатывать сайты и не париться.

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

Для начала установим плагины и темы, для этого в левой панели выберите последний пункт "Extensions", сочетание клавиш ctrl + shift + x, далее в поиск вводим название нужного расширения и нажимаем "Install".

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

1. Sublime Text Keymap and Settings Importer - Перенос настроек и горячих клавиш из Sublime
2. Auto Close Tag - авто закрытие тегов
3. Auto Rename Tag - авто изменение имени тегов
4. Bracket Pair Colorizer - Цветные скобки исходя из иерархии
5. ESLint - помощник в JavaScript
6. PHP IntelliSense - помощник в PHP
7. Vetur - поддержка VueJS
8. vscode-icons или Material Icon Theme - Иконки файлов
9. Sass - поддержка Sass
10. AutoFileName - подсказка имени файла
11. Color Picker - окно с выбором цвета
12. Live Server - Лайв сервер
13. Laravel Blade Snippets - поддержка Laravel Blade
14. Open in Browser - Открыть в браузере
15. One Dark Pro Theme

Для перехода в файл настроек, нажмите сочетание клавиш ctrl +shift +p, в поиске введите settings и выберите из списка "Open Default Settings (JSON)"

Код для вставки в файл настроек:

{
	"workbench.startupEditor": "newUntitledFile",
	"git.ignoreMissingGitWarning": true,
	"workbench.colorTheme": "One Dark Pro",
	"workbench.iconTheme": "material-icon-theme",
	"editor.fontFamily": "Fira Code",
	"terminal.integrated.fontSize": 17,
	"terminal.integrated.shell.windows": "E:\\Program Files\\Git\\bin\\bash.exe",
	"window.menuBarVisibility": "toggle",
	"workbench.statusBar.visible": true,
	"workbench.activityBar.visible": true,
	"editor.minimap.enabled": false,
	"files.defaultLanguage": "html",
	"editor.fontSize": 16,
	"editor.lineHeight": 24,
	"editor.tabSize": 2,
	"workbench.editor.tabSizing": "shrink",
	"editor.detectIndentation": false,
	"editor.insertSpaces": false,
	"editor.folding": false,
	"editor.glyphMargin": false,
	"editor.smoothScrolling": true,
	"editor.multiCursorModifier": "ctrlCmd",
	"emmet.includeLanguages": {
			"blade": "html"
	},
	"editor.snippetSuggestions": "top",
	"editor.formatOnPaste": true,
	"editor.wordWrap": "on",
	"window.zoomLevel": 0,
	"editor.fontLigatures": true,
	"workbench.editor.highlightModifiedTabs": true,
	"files.autoSave": "afterDelay",
	"explorer.sortOrder": "type",
	"editor.acceptSuggestionOnEnter": "off"
}

Более поробно, все описани в нашем видео!

P.S. Чтобы Emmet быстро работал, как в Sublime. Добавьте в код настроек:

"emmet.showExpandedAbbreviation": "never",
"emmet.triggerExpansionOnTab": true

Чтобы более подробно разобраться в данной теме "Настройка visual studio code (vs code) для разработчика 2020" советую посмотреть наше видео на эту тему:

Хочешь научиться создавать сайты? Изучи все на практике, с помощью интерактивных курсов у нас на проекте. Регистрация - Войти - Наши курсы. Задавайте вопросы в комментариях!