- Плагины для HTML и CSS в VS Code
- IntelliSense
- Auto Close Tag
- Beautify
- Color Picker
- HTML CSS Support
- CSS Peek
- Live Server
- Заключение
- 10 расширений для VS Code, без которых я не могу программировать
- 1. Beautify
- 2. Better Comments
- 3. Bookmarks
- 4. Bracket Pair Colorizer 2
- 5. Format in Context Menus
- 6. Git Graph
- 7. GitLens
- 8. Indent Rainbow
- 9. Path Intellisense
- 10. Total Lines
- js-beautify for VS Code
- How we determine what settings to use
- VS Code | .jsbeautifyrc settings map
- Keyboard Shortcut
- Contributing
Плагины для HTML и CSS в VS Code
Emmet — это плагин, предоставляющий набор сокращений и ярлыков для написания кода HTML и CSS. Он помогает писать код быстрее и эффективнее, позволяя превращать сокращения в полные фрагменты кода HTML/CSS.
IntelliSense
IntelliSense для имен классов CSS. Этот подключаемый модуль обеспечивает интеллектуальное завершение кода для имен классов CSS в ваших HTML-файлах. Это упрощает отслеживание ваших стилей и гарантирует, что вы используете правильные имена классов.
Auto Close Tag
Auto Close Tag — это простой, но полезный плагин, который автоматически закрывает HTML-теги по мере их ввода. Это экономит ваше время и помогает избежать ошибок, вызванных отсутствием закрывающих тегов.
Beautify
Beautify — это плагин, который автоматически форматирует ваш код HTML, CSS и JavaScript. Это поможет вам сохранить ваш код аккуратным и организованным, упрощая его чтение и поддержку.
Color Picker
Color Picker — это удобный инструмент, который позволяет выбирать цвета из цветового круга или палитры цветов. Затем вы можете вставить выбранный цветовой код в код HTML или CSS, чтобы упростить сопоставление цветов и стилей.
HTML CSS Support
HTML CSS Support предоставляет фрагменты кода HTML и CSS, а также автозавершение кода и диагностику. Это поможет вам писать код HTML и CSS более эффективно и с меньшим количеством ошибок.
CSS Peek
CSS Peek — это плагин, который позволяет вам быстро переходить от класса или идентификатора CSS в вашем HTML-коде к соответствующим стилям в ваших файлах CSS. Это упрощает поиск и редактирование стилей и обеспечивает синхронизацию кода HTML и CSS.
Live Server
Live Server — это простой веб-сервер, который позволяет вам просматривать код HTML, CSS и JavaScript в браузере во время работы с ним. С помощью этого плагина вы можете видеть свои изменения в режиме реального времени и более эффективно отлаживать свой код.
Заключение
Установив эти плагины и расширения, разработчики HTML/CSS могут расширить свои возможности работы с HTML и CSS в VS Code. Независимо от того, создаете ли вы простой веб-сайт или сложное веб-приложение, эти инструменты помогут вам написать более качественный код и оптимизировать рабочий процесс.
10 расширений для VS Code, без которых я не могу программировать
VS Code — мой любимый редактор кода. Это — самый популярный из существующих редакторов, возможности которого можно расширять практически до бесконечности. И, что удивительно, разработала его компания Microsoft. Я полагаю, что ни один из других редакторов и ни одна из других IDE не может дать разработчику хотя бы половину того, что способен дать ему VS Code. Одна из сильных сторон VS Code — это система расширений. Она позволяет создавать расширения буквально на все случаи жизни. Хочу рассказать вам о моём топ-10 расширений для VS Code.
1. Beautify
Для установки расширения воспользуйтесь в VS Code клавиатурным сокращением CTRL+P , введите в открывшееся поле нижеприведённую команду и нажмите Enter .
ext install HookyQR.beautify
Расширение Beautify позволяет форматировать html-, js-, css-, JSON- и sass-код. Параметрами форматирования можно управлять. Это расширение является надстройкой над стандартной системой js-beautify и позволяет разработчику форматировать код именно так, как ему нужно.
2. Better Comments
ext install aaron-bond.better-comments
Расширение Better Comments позволяет расширить возможности по работе с комментариями. В частности, оно позволяет делить комментарии на категории. Это могут быть уведомления, запросы, списки дел, примечания.
Использование Better Comments
3. Bookmarks
ext install alefragnani.Bookmarks
Расширение Bookmarks — это настоящий спасательный круг для программистов. Особенно для тех, которые потерялись среди тысяч строк кода. Это расширение позволяет прикреплять к строкам кода закладки. Если у строки кода есть закладка — к этой строке можно легко перейти, воспользовавшись списком закладок.
4. Bracket Pair Colorizer 2
ext install CoenraadS.bracket-pair-colorizer-2
Расширение Bracket Pair Colorizer 2 позволяет раскрашивать скобки, что облегчает нахождение пар открывающих и закрывающих скобок. Это очень полезно в тех случаях, когда приходится работать с вложенными друг в друга программными конструкциями.
Пары скобок выделены цветами
5. Format in Context Menus
ext install lacroixdavid1.vscode-format-context-menu
Расширение Format in Context Menus позволяет форматировать файлы, выделяя их в боковой панели и вызывая команду контекстного меню. Это особенно удобно в тех случаях, когда имеется множество файлов, которые нужно отформатировать, но при этом в имеющемся окружении нет поддержки средств для форматирования и линтинга кода.
Работа с Format in Context Menus
6. Git Graph
ext install mhutchie.git-graph
Расширение Git Graph позволяет просматривать структуру репозитория и, пользуясь этой структурой, выполнять различные операции. Это расширение поддаётся тонкой настройкой и обладает множеством возможностей. Вероятно, для того, чтобы как следует его описать, понадобится целая отдельная статья.
7. GitLens
ext install eamodio.gitlens
Расширение GitLens помогает выяснять авторство кода с использованием аннотаций git blame и линз. Это расширение, кроме прочего, позволяет очень удобно просматривать содержимое репозиториев и узнавать полезные сведения о коде.
8. Indent Rainbow
ext install oderwat.indent-rainbow
Расширение Indent Rainbow позволяет раскрашивать отступы, выделяя разными цветами отступы разных уровней. Это особенно полезно при работе с глубоко вложенными конструкциями в языках наподобие Python.
9. Path Intellisense
ext install christian-kohler.path-intellisense
Расширение Path Intellisense оснащает редактор возможностями по автозавершению путей к файлам. Хотя VS Code поддерживает автозавершение путей и без расширений, эта возможность ограничена только HTML-, CSS- и JavaScript-файлами. Благодаря данному расширению автозавершением путей можно пользоваться при работе с любыми файлами и любыми языками.
Работа с Path Intellisense
10. Total Lines
ext install praveencrony.total-lines
Расширение Total Lines — это маленький удобный инструмент, который выводит в статус-баре сведения о количестве строк в открытом файле. Это — приятное дополнение к моей коллекции расширений.
А какими расширениями для VS Code пользуетесь вы?
Напоминаем, что у нас продолжается конкурс прогнозов, в котором можно выиграть новенький iPhone. Еще есть время ворваться в него, и сделать максимально точный прогноз по злободневным величинам.
js-beautify for VS Code
Beautify javascript , JSON , CSS , Sass , and HTML in Visual Studio Code. VS Code uses js-beautify internally, but it lacks the ability to modify the style you wish to use. This extension enables running js-beautify in VS Code, AND honouring any .jsbeautifyrc file in the open file’s path tree to load your code styling. Run with F1 Beautify (to beautify a selection) or F1 Beautify file . For help on the settings in the .jsbeautifyrc see Settings.md
How we determine what settings to use
- When not using a multi-root workspace:
- If there is a valid .jsbeautifyrc in the file’s path tree, up to project root, these will be the only settings used.
- If an option is a file path or object of configuration specified in the user or workspace settings like this: «beautify.config» : «string|Object.
» , these will be the only settings used. The file path is interpreted relative to the workspace’s root folder. - If there is a valid .jsbeautifyrc in the file’s path tree, above project root, these will be the only settings used.
- If there is a valid .jsbeautifyrc in your home directory, these will be the only settings used.
- Settings are translated from your VS Code workspace/user settings.
- Any open editor settings (indent spaces/tabs) for the specific file are merged in.
- Editorconfig settings are searched for (See http://editorconfig.org/) and are merged in.
VS Code | .jsbeautifyrc settings map
.jsbeautifyrc setting VS Code setting eol files.eol tab_size editor.tabSize indent_with_tabs (inverted) editor.insertSpaces wrap_line_length html.format.wrapLineLength wrap_attributes html.format.wrapAttributes unformatted html.format.unformatted indent_inner_html html.format.indentInnerHtml preserve_newlines html.format.preserveNewLines max_preserve_newlines html.format.maxPreserveNewLines indent_handlebars html.format.indentHandlebars end_with_newline html.format.endWithNewline (html) end_with_newline file.insertFinalNewLine (css, js) extra_liners html.format.extraLiners space_after_anon_function javascript.format
.insertSpaceAfterFunctionKeywordForAnonymousFunctionsspace_in_paren javascript.format
.insertSpaceAfterOpeningAndBeforeClosingNonemptyParenthesisNote that the html.format settings will ONLY be used when the document is html. javascript.format settings are included always.
Also runs html and css beautify from the same package, as determined by the file extension. The schema indicates which beautifier each of the settings pertains to.
The .jsbeautifyrc config parser accepts sub elements of html , js and css so that different settings can be used for each of the beautifiers (like sublime allows). Note that this will cause the config file to be incorrectly structured for running js-beautify from the command line.
Settings are inherited from the base of the file. Thus:
Will result in the indent_size being set to 4 for JavaScript and HTML, but set to 2 for CSS. All will get the same indent_char setting.
If the file is unsaved, or the type is undetermined, you’ll be prompted for which beautifier to use.
You can control which file types, extensions, or specific file names should be beautified with the beautify.language setting.
, "css": ["css", "scss"], "html": ["htm", "html"] // ^^ providing just an array sets the VS Code file type > >
Beautify on save will be enabled when «editor.formatOnSave» is true.
Beautification on particular files using the built in Format Document (which includes formatting on save) can be skipped with the beautify.ignore option. Using the Beautify file and Beautify selection will still work. For files opened from within the workspace directory, the glob patterns will match from the workspace folder root. For files opened from elsewhere, or when no workspace is open, the patterns will match from the system root.
Note that the glob patterns are not used to test against the containing folder. You must match the filename as well.
Embedded version of js-beautify is v1.8.4
Keyboard Shortcut
Use the following to embed a beautify shortcut in keybindings.json. Replace with your preferred key bindings.
Contributing
For information on contributing see Contributing.md