VS Code
Visual Studio Code (VS Code) — текстовый редактор, разработанный Microsoft для Windows, Linux и macOS. Позиционируется как «лёгкий» редактор кода для кроссплатформенной разработки веб- и облачных приложений. Имеет широкие возможности для кастомизации: пользовательские темы, сочетания клавиш и файлы конфигурации. Распространяется бесплатно.
-- материал из Википедии (opens in a new tab)
Settings.json
Как и какие настройки использовать, смотрите на Youtube (например, в уроке от WebDesign Master (opens in a new tab)) или лучше читайте в официальной документации (opens in a new tab).
Для доступа к файлу settings.json
используйте комбинацию клавиш Ctrl + Shift + P
(на MacOS: Cmd + Shift + P
). Появится строка поиска. Введите запрос settings.json
. В выпадающем списке выберите "Параметры: Открыть пользовательские настройки (JSON)" ("Preferences: Open User Settings (JSON)").
Мои настройки:
{
"liveServer.settings.donotShowInfoMsg": true,
"workbench.startupEditor": "none",
"liveServer.settings.CustomBrowser": "chrome",
"editor.minimap.enabled": false,
"breadcrumbs.enabled": false,
"workbench.sideBar.location": "right",
"window.zoomLevel": 1,
"workbench.colorTheme": "New Moon Blue",
"editor.smoothScrolling": true,
"editor.fontSize": 14,
"editor.tabSize": 2,
"editor.detectIndentation": false,
"editor.folding": false,
"terminal.integrated.fontSize": 14,
"editor.insertSpaces": false,
"editor.linkedEditing": true,
"editor.renderWhitespace": "boundary",
"editor.parameterHints.enabled": false,
"workbench.editor.enablePreview": false
}
Плагины
All Autocomplete
Идентификатор: Atishay-Jain.All-Autocomplete
Описание: Create autocomplete items from open files in VSCode.
Издатель: Atishay Jain
Ссылка на Visual Studio Marketplace ↗ (opens in a new tab)
Auto Close Tag
Идентификатор: formulahendry.auto-close-tag
Описание: Automatically add HTML/XML close tag, same as Visual Studio IDE or Sublime Text
Издатель: Jun Han
Ссылка на Visual Studio Marketplace ↗ (opens in a new tab)
Auto Complete Tag
Идентификатор: formulahendry.auto-complete-tag
Описание: Extension Packs to add close tag and rename paired tag automatically for HTML/XML
Издатель: Jun Han
Ссылка на Visual Studio Marketplace ↗ (opens in a new tab)
Auto Rename Tag
Идентификатор: formulahendry.auto-rename-tag
Описание: Auto rename paired HTML/XML tag
Издатель: Jun Han
Ссылка на Visual Studio Marketplace ↗ (opens in a new tab)
Code Runner
Идентификатор: formulahendry.code-runner
Описание: Run C, C++, Java, JS, PHP, Python, Perl, Ruby, Go, Lua, Groovy, PowerShell, CMD, BASH, F#, C#, VBScript, TypeScript, CoffeeScript, Scala, Swift, Julia, Crystal, OCaml, R, AppleScript, Elixir, VB.NET, Clojure, Haxe, Obj-C, Rust, Racket, Scheme, AutoHotkey, AutoIt, Kotlin, Dart, Pascal, Haskell, Nim
Издатель: Jun Han
Ссылка на Visual Studio Marketplace ↗ (opens in a new tab)
CSS Peek
Идентификатор: pranaygp.vscode-css-peek
Описание: Allow peeking to css ID and class strings as definitions from html files to respective CSS. Allows peek and goto definition.
Издатель: Pranay Prakash
Ссылка на Visual Studio Marketplace ↗ (opens in a new tab)
eCSStractor for VSCode
Идентификатор: diz.ecsstractor-port
Описание: VSCode plugin for extracting class names from HTML and generate CSS stylesheet for following work.
Издатель: diz
Ссылка на Visual Studio Marketplace ↗ (opens in a new tab)
EditorConfig for VS Code
Идентификатор: EditorConfig.EditorConfig
Описание: EditorConfig Support for Visual Studio Code
Издатель: EditorConfig
Ссылка на Visual Studio Marketplace ↗ (opens in a new tab)
ESLint
Идентификатор: dbaeumer.vscode-eslint
Описание: Integrates ESLint JavaScript into VS Code.
Издатель: Microsoft
Ссылка на Visual Studio Marketplace ↗ (opens in a new tab)
GitHub Theme
Идентификатор: GitHub.github-vscode-theme
Описание: GitHub theme for VS Code
Издатель: GitHub
Ссылка на Visual Studio Marketplace ↗ (opens in a new tab)
HTML to CSS autocompletion
Идентификатор: solnurkarim.html-to-css-autocompletion
Описание: Provides completion suggestions for classes and ids from markup documents to stylesheets.
Издатель: solnurkarim
Ссылка на Visual Studio Marketplace ↗ (opens in a new tab)
JavaScript (ES6) code snippets
Идентификатор: xabikos.JavaScriptSnippets
Описание: Code snippets for JavaScript in ES6 syntax
Издатель: charalampos karypidis
Ссылка на Visual Studio Marketplace ↗ (opens in a new tab)
Live Server
Идентификатор: ritwickdey.LiveServer
Описание: Launch a development local Server with live reload feature for static & dynamic pages
Издатель: Ritwick Dey
Ссылка на Visual Studio Marketplace ↗ (opens in a new tab)
Multiple clipboards for VSCode
Идентификатор: slevesque.vscode-multiclip
Описание: Override the regular Copy and Cut commands to keep selections in a clipboard ring
Издатель: slevesque
Ссылка на Visual Studio Marketplace ↗ (opens in a new tab)
New Moon: Blue Syntax Theme
Идентификатор: taniarascia.new-moon-blue-vscode
Описание: New Moon: Blue Alt Syntax Theme
Издатель: Tania Rascia
Ссылка на Visual Studio Marketplace ↗ (opens in a new tab)
Prettier - Code formatter
Идентификатор: esbenp.prettier-vscode
Описание: Code formatter using prettier
Издатель: Prettier
Ссылка на Visual Studio Marketplace ↗ (opens in a new tab)
Preview
Идентификатор: searKing.preview-vscode
Описание: A Markdown, ReStructured Text, HTML, Jade, Pug, Mermaid, Image previewer.
Издатель: Haixin Chen
Ссылка на Visual Studio Marketplace ↗ (opens in a new tab)
Russian Language Pack for Visual Studio Code
Идентификатор: MS-CEINTL.vscode-language-pack-ru
Описание: Language pack extension for Russian
Издатель: Microsoft
Ссылка на Visual Studio Marketplace ↗ (opens in a new tab)
Tailwind CSS IntelliSense
Идентификатор: bradlc.vscode-tailwindcss
Описание: Intelligent Tailwind CSS tooling for VS Code
Издатель: Tailwind Labs
Ссылка на Visual Studio Marketplace ↗ (opens in a new tab)
Theme - Oceanic Next
Идентификатор: naumovs.theme-oceanicnext
Описание: Oceanic Next theme for VSCode + dimmed bg version for better looking UI
Издатель: Sergii N
Ссылка на Visual Studio Marketplace ↗ (opens in a new tab)
vscode-icons
Идентификатор: vscode-icons-team.vscode-icons
Описание: Icons for Visual Studio Code
Издатель: VSCode Icons Team
Ссылка на Visual Studio Marketplace ↗ (opens in a new tab)
vscode-pdf
Идентификатор: tomoki1207.pdf
Описание: Display pdf file in VSCode.
Издатель: tomoki1207
Ссылка на Visual Studio Marketplace ↗ (opens in a new tab)
W3C Web Validator
Идентификатор: CelianRiboulet.webvalidator
Описание: Check the validity of your HTML/CSS files in one click
Издатель: Celian Riboulet
Ссылка на Visual Studio Marketplace ↗ (opens in a new tab)
markdownlint
Идентификатор: DavidAnson.vscode-markdownlint
Описание: Markdown linting and style checking for Visual Studio Code
Издатель: David Anson
Ссылка на Visual Studio Marketplace ↗ (opens in a new tab)
New Moon Syntax Theme
Идентификатор: taniarascia.new-moon-vscode
Описание: The optimized dark theme for web development. Your new favorite theme.
Издатель: Tania Rascia
Ссылка на Visual Studio Marketplace ↗ (opens in a new tab)