Программирование на Python и Objective-C в Mac OS

Программирование на Python и Objective-C под Mac OS и для iPhone / iPod Touch

Css vs code: CSS, SCSS, and Less support in Visual Studio Code

On

Css vs code: CSS, SCSS, and Less support in Visual Studio Code

By alexxlab

Содержание

9 полезных плагинов VS Code для вёрстки — Блог HTML Academy


Visual Studio Code — один из самых популярных редакторов кода. Многие разработчики предпочитают его, так как он удобен
в использовании и содержит множество полезных расширений, с помощью которых легко оптимизировать работу.


Полезные плагины помогают допускать меньше ошибок при написании кода, да и значительно сокращают время работы. Чтобы
установить расширения, необходимо перейти во вкладку «Extensions» и с помощью поиска найти нужный плагин.


Сделали подборку популярных и полезных плагинов VS Code.

Emmet


Помогает ускорить вёрстку. С помощью ! и tab можно создать базовую структуру кода за 1 секунду, либо быстро создать
вложенные теги. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1. 0">
    <title>Document</title>
</head>
<body>

</body>
</html>


Много разных фишек, с которыми можно разобраться и ускорить процесс работы. Поддержка emmet встроена прямо в редактор,
устанавливать не нужно.

Material Theme


Приятная тема для редактора с разными акцентными цветами.

Live Server


Чтобы сразу увидеть результат работы. Нужно навести на строчку кода, нажать на правую кнопку мыши, выбрать «Open with
Live Server» и в браузере отобразится страница, которая автоматически будет перезагружаться.


Это очень удобно, так как любые изменения будут отображаться без обновления страницы. Не забывайте отключать плагин с
помощью «Stop Live Server»

Как использовать Live Server в работе

CSS Peek


Показывает всплывающее окошко с CSS во время работы над HTML. Это упрощает работу и позволяет не искать нужное
свойство среди множества классов в большом CSS-файле.

Bracket pair colorizer


Окрашивает открывающие и закрывающие скобки в определённые цвета, что минимизирует количество ошибок и позволяет
быстрее разобраться в коде.

Prettier — code formatter


Приводит любой код в нормальный вид за считанные секунды. Комбинация Ctrl+Shift+P отформатирует документ и задаст
структуру коду.

Auto rename tag


Удобен для переименования тегов в HTML. Если тег повторяется, при замене одного с помощью плагина, все другие будут
переименованы автоматически.

Path autocomplete


Показывает возможный путь к файлу в кавычках. Не нужно искать папку вручную, путь будет предложен автоматически.

HTML CSS Support


Если вы используете много классов и тегов, могут возникнуть ошибки при их написании. Плагин автоматически дополняет
название ID или HTML-атрибута для определений, найденных в рабочей области, на которые ссылается link.

Используйте эти плагины на курсе по вёрстке сайтов

Запишитесь на ближайший поток курса «HTML и CSS. Профессиональная вёрстка сайтов», чтобы попробовать всё на практике.

Хочу на курс


Нажатие на кнопку — согласие на обработку персональных данных

VS Code SCSS автоматическая компиляция в CSS

Я новичок в программировании и только начал изучать HTML/CSS.
Для кодирования я начал использовать VS-код. И мне это очень нравится.

Единственная проблема, с которой я столкнулся, — это автоматическая компиляция SCSS в CSS.
Я искал и читал много решений, и лучшее, что я нашел, было с кодом ruby + sass + в VS Code terminal sass --watch . , он наблюдает за моим проектом и создает новый CSS, когда создается новый SCSS. И он следит за изменениями в SCSS. Но проблема в том, что этот код должен вводиться каждый раз, когда я запускаю VS Code.

Попробовал также решение с файлом Gulp и package.json, но также не смог запустить его автоматически. И это должно быть сделано для каждого проекта отдельно.
Я попробовал также Atom, и у него есть пакет sass-autocompile , и он отлично работает. Итак, самый простой способ для меня-использовать Атом и забыть. Но я хотел бы использовать VS-код.

Итак, вообще вопрос в том, будет ли возможность создать расширение для кода VS для автоматизации компиляции SCSS в CSS (аналогично пакету Atom, который был бы лучшим IMO). Или, может быть, кто-нибудь объяснит мне по-другому, как решить эту проблему.

css

sass

visual-studio-code

Поделиться

Источник


Janis.B    

01 марта 2017 в 17:49

3 ответа

  • Компиляция Sass (scss) в css

    У меня есть этот шаблон — веб-шаблон — редакционный , когда я добавил его в свое существующее приложение Meteor , он не загружает scss files , только файл css, который находится в каталоге клиента. Хотя я положил scss files в общую папку. Как лучше всего я могу это добавить? поскольку я не мог…

  • Как найти css файл scss файла в проекте angular

    Я создал проект angular в VS Code с помощью следующей команды. ng new my-app —style=scss перейдя по этой ссылке github Теперь каждая таблица стилей, создаваемая с помощью angular-cli, имеет расширение .scss вместо .css Теперь есть требование проверить, как Sass преобразуется в css, потому что я…


8

Вам понадобятся две вещи:

  • tasks.json файл
  • Расширение Blade Runner для VS-КОДА

Начните с создания папки .vscode в вашем проекте.

Затем в нем создайте файл tasks.json со следующим содержимым:

{
    "version": "0.1.0",
    "command": "sass",
    "isShellCommand": true,
    "args": ["--watch", "."],
    "showOutput": "always"
}

Теперь, после открытия проекта, вы можете запустить задачу, нажав Ctrl+Shift+B .

Для автоматизации процесса используйте расширение Blade Runner — https://marketplace.visualstudio.com/items?itemName=yukidoi.blade-runner

Blade Runner выполнит задачу автоматически после открытия проекта 🙂

Поделиться


gabrieln    

11 марта 2017 в 19:36

Поделиться


Prima    

06 марта 2019 в 19:24


0

Простая компиляция или живые расширения компилятора SASS для Visual Studio Code.
Компилятор Live SASS может перекомпилировать все исходные файлы, в то время как Easy Compile просто компилирует один файл.

Простая компиляция компилируется при сохранении файла, в то время как компилятор Live SASS можно заставить наблюдать за вашим кодом и компилировать, когда он видит изменения. Вы должны вручную запускать его каждый раз, в то время как простая компиляция выполняется из коробки.

Поделиться


Leander    

07 ноября 2019 в 09:35

  • Это необходимо, чтобы SCSS файл преобразовать в css

    Когда я использую scss в качестве стиля по умолчанию в своем проекте angular. Без компиляции файла .scss в .css, style is applied.therefore я хочу знать, что scss непосредственно применим в проекте без компиляции в css.I use vs Code editor .

  • Преобразование переменных CSS в переменные SCSS

    Я нахожусь в процессе изменения всех моих файлов css на scss. Однако мне нужно преобразовать переменные css в переменные scss для всех моих файлов стилей. Есть ли способ сделать это, не заходя в каждый файл и не используя find and replace? Я использую код VS, так как думал об использовании функции…

Похожие вопросы:

Webpack2 компилирует sass/scss в js вместо css

Я написал сценарий webpack, который должен скомпилировать все файлы .scss в один файл css. Причина, по которой я выбрал webpack вместо gulp/grunt, заключается в том, что я думал, что будет проще…

Почему Sass или Scss преобразуют цвет #ffe в #ffffee и добавляют»;», что может замедлить загрузку файла css?

Sass или Scss (.sass) часто встречается в проектах Ruby на Rails, но я только что обнаружил, что он преобразует цвет, например: background: #ffe в background: #ffffee; зачем лишние байты? Кроме…

VS Code report @support в режиме scss, который } ожидался

Как я могу каким-то образом добавить @support в известный синтаксис для SCSS linter в VS Code?

Компиляция Sass (scss) в css

У меня есть этот шаблон — веб-шаблон — редакционный , когда я добавил его в свое существующее приложение Meteor , он не загружает scss files , только файл css, который находится в каталоге клиента….

Как найти css файл scss файла в проекте angular

Я создал проект angular в VS Code с помощью следующей команды. ng new my-app —style=scss перейдя по этой ссылке github Теперь каждая таблица стилей, создаваемая с помощью angular-cli, имеет…

Это необходимо, чтобы SCSS файл преобразовать в css

Когда я использую scss в качестве стиля по умолчанию в своем проекте angular. Без компиляции файла .scss в .css, style is applied.therefore я хочу знать, что scss непосредственно применим в проекте…

Преобразование переменных CSS в переменные SCSS

Я нахожусь в процессе изменения всех моих файлов css на scss. Однако мне нужно преобразовать переменные css в переменные scss для всех моих файлов стилей. Есть ли способ сделать это, не заходя в…

SCSS в Svelte не распознается Visual Studio Code

VSCode не распознает scss, который я включаю в стройный файл. Он думает, что это стили css, и первое же вложение css, которое он встречает, дает мне ошибку. Я попытался отключить проверку css в…

Предварительная компиляция scss-файлов в css

У меня есть приложение nuxt, и я включаю свой scss-файл в свой nuxt.config.js, чтобы он был скомпилирован и доступен в моем приложении. export default { … css: [ { src: ‘~assets/sass/app.scss’,…

Компиляция часов SCSS Many-to-One CSS

Я пытаюсь найти способ скомпилировать мои несколько файлов scss в один файл css. скрипты находятся в package.json с использованием узла-sass Лучшее, что я нашел на данный момент, это : sass —watch…

Используем VS Code для Веб-разработки / Хабр

VS Code (Visual Studio Code) — относительно новый текстовый редактор, выпущенный Microsoft. Он, также как и Atom, основывается на облочке Electron (написанной командой Atom), кардинально отличаясь реализацией самого редактора.

VS Code обладает своими уникальными фичами, такими, как, например, IntelliSense «из-коробки».

В этой статье я бы хотел поделиться тем, что нашел для себя полезным в VS Code для веб-разработки.

Осторожно! Под катом много картинок и гифок.

Stable vs Insiders

У Visual Studio есть два канала обновлений — stable и insiders. Первый — стабильные версии, второй же обновляется каждую неделю и в обмен на возможно большее количество багов включает самые современные фичи. Скачать последнюю версию можно либо по

ссылке

, либо указав update.channel как «insiders» в настройках VS Code.

В настоящий момент, чтобы получить достойную поддержку JSX в VS Code, прийдется немного

пот

помучаться и установить два расширения:

JS is JSX overwrite
ESLint

Последний, впрочем, может быть заменен на XO.

Если вы выбрали ESLint, то в проекте должен быть .eslintrc следующего содержания:

{
  "ecmaFeatures": {
    "jsx": true
  }
}

Если вы все сделали правильно, то теперь JSX будет подсвечиваться без ошибок:

В качестве линтера файлов стилей я рекомендую расширение

stylelint

. В качестве «бекенда» он использует

PostCSS

, что означает, что поддерживаются любые файлы стилей, поддерживаемые последним.

Чтобы включить stylelint в VS Code, понадобится снова пойти в настройки и добавить:

{
  "stylelint.enable": true
}
  • Dart — популярный в среде AngularJS язык программирования

  • Flow — плагин для flowtype, статического тайп-чекера от facebook для JavaScript’а. Полезен, если хочется добавить в проект типизацию, но не хочется по каким-либо причинам использовать TypeScript.

  • Handlebars — поддержка шаблонов handlebars

  • HTMLLint — будет полезен опять же для AngularJS разработчиков и верстальщиков (по понятным причинам бесполезен при работе с JSX), демо можно посмотреть здесь htmlhint.com

  • Smarty — старый добрый шаблонизатор для PHP

  • Stylus —еще один плагин для Stylus, если по какой-то причине не понравился stylelint

  • Swig —шаблонизатор для javascript, используется, например, в проекте Mean.JS

  • Twig — поддержка одного из самых популярных шаблонизаторов PHP. Часто используется в Symfony проектах.

  • XML Tools —полезный для XML/XSLT разработчиков набор плагинов

Я не фанат сниппет-плагинов. Но если вы, напротив, являетесь таковым, то на

Visual Studio Marketplace

вас ждет

огромный раздел с ними

Align

Форматирует выделение

Beautify

Интерфейс к

jsbeautifier.org

. Крайне полезен если приходится часто приводить в порядок совсем некудышный JS-код.

Bookmarks

Позволяет запоминать строки и быстро переходить к ним

Color Highlighter

Подсвечивает HTML-цвета

Dash

Интеграция с Dash

Debugger for Chrome

Интеграция с отладчиком Google Chrome или другими отладчиками, поддерживающими его протокол.

ECMAScript Quotes Transformer

Преобразует кавычки в ES строковых литералах

Editor Config for VSCode

Поддержка формата .editorconfig

ftp-sync

Автоматически синхронизирует файлы по ftp протоколу

Project Manager

Менеджер проектов для VS Code

Runner

Позволяет запускать скрипты прямо из редактора

К сожалению, VS Code пока что не поддерживает тем оформления интерфейса.

Но есть много классных тем подсветки синтаксиса. Ниже некоторые из них.

Base16 Ocean

Base16 Ocean Kit

Base16 Ocean Dark — конвертирована из Sublime Spacegray пакета (на скриншоте она)

Material-theme

Ссылка

Seti

Ссылка

В VS Code сочетания клавиш достаточно легко меняются через меню Code > Preferences > Keyboard Shortcuts. Меня немного смущало то, что под Mac Tab/Shift+Tab не назначены, но меня рефлекторно тянет в файлах, отформатированных табами, под Маком, использовать именно эти бинды. Если вас тоже, то решается все парой строк в

keybindings.json

:

[
{ "key": "tab",                 "command": "editor.action.indentLines",
                                "when": "editorTextFocus" },
{ "key": "shift+tab",           "command": "editor.action.outdentLines",
                                "when": "editorTextFocus" }
]

Для VS Code есть официальная утилита

Yo Code

, которая позволяет сконвертировать множество расширений из TextMate и Sublime в формат Visual Studio Code.

Надеюсь, что вы нашли здесь что-то полезное для себя. И, если вы еще только знакомитесь с VS Code, знакомство будет приятным. 🙂

Мы создали список расширений и полезных ресурсов по VS Code на github, awesome-vscode. Если у вас есть, что добавить в него — открывайте Pull Request, или просто поддерживайте авторов «звездочками». К сожалению, по правилам awesome, попасть в список awesome-репозиториев мы сможем только через несколько недель, за это время мы надеемся собрать там все самые лучшие ресурсы для редактора!

html не связывается с файлом css в файле Visual Studio Code

  • Windows 8.1 64бит
  • Visual Studio Code 1.15.1

html не связывается с css

  1. Классы и идентификаторы в css не отображаются на Intellisense в html.
  2. Когда я ставлю курсор на класс или идентификатор в html и нажимаю F12, чтобы перейти к css, появляется окно с сообщением «the определение не найдено.»

Однако, когда я открываю html в браузере, веб-страница отображается совершенно нормально. Так что, похоже, с моим Visual Studio Code что-то не так.

html

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Test</title>
  <link rel="stylesheet" type="text/css" href="./css/style.css">
</head>

<body>
  <div></div>
  <div></div>
</body>

</html>

css

.abc{
    width: 100px;
    height: 100px;
    background: red;
}

#xyz{
    width: 100px;
    height: 100px;
    background: blue;
}

файлы

index.html
css

|

+—style.css

страница

Я хотел бы знать, как избавиться от этой проблемы.

Спасибо за ответы, ребята.
Следующее не сработало.

  • href="../css/style.css"
  • href="~/css/style.css"
  • href="css/style.css"
  • Встраивание таблицы стилей в тег (и я хочу сохранить css в отдельном файле)

html

css

windows

visual-studio-code

Поделиться

Источник


dixhom    

03 сентября 2017 в 05:30

2 ответа

  • Visual Studio Code CSS ошибка «не используйте пустые наборы правил»

    Я использую Visual Studio Code для HTML и CSS. Я получаю ошибку, которая не ухудшает работу сайта, но я хотел бы узнать о ней больше. Когда я навожу курсор на стиль для ID в HTML, появляется окно с надписью. Do not use empty rulesets. Может ли кто-нибудь предоставить дополнительную информацию о…

  • Visual Studio Code точки останова в typescript

    Используя Visual Studio Code, когда я устанавливаю точку останова в своем файле .ts,она не попадает. (И не красный, когда я отлаживаю). Однако если я установлю точку останова в скомпилированном JS, то она поменяет меня местами с файлом ts, когда я пройду через код. И тогда все точки останова в…


2

Я не верю, что переход к классам css и идентификаторам поддерживается изначально Vscode. Попробуйте расширение CSS Peek , оно прекрасно делает то, что вы хотите.

Поделиться


Mark    

04 сентября 2017 в 21:54


0

Убедитесь, что путь, указанный вами для доступа к файлу style.css, правильный.
Если это не сработает, попробуйте добавить встроенный css в index.html:

<!DOCTYPE html>
<html lang="en">

<head>
<title>Test</title>
<style type="text/css" media="screen">
.abc{
     width: 100px;
     height: 100px;
     background: red;
    }

#xyz{
    width: 100px;
    height: 100px;
    background: blue;
    }
</style>
</head>

<body>
<div></div>
<div></div>
</body>

</html>

Это альтернативное решение.

По моим словам, ваш браузер не обновляет файл, поэтому вы можете обновить/перезагрузить всю страницу, нажав CTRL + F5 в windows для mac
CMD + R

Попробуйте, если все еще возникают проблемы, то вы можете проверить это с помощью инструмента firebug для firefox.

Для IE8 и Google Chrome вы можете проверить это, нажав клавишу F12, появится всплывающее окно вашего инструмента разработчика, и вы увидите Html и css.

Вы также можете попробовать этот синтаксис:

<link href="./css/style.css" rel="stylesheet" type="text/css" media="screen, projection"/>

Убедитесь, что браузер действительно делает запрос и не возвращает 404.

Надеюсь, Это Поможет!!

Поделиться


umang uliana    

03 сентября 2017 в 05:51

Похожие вопросы:

Как использовать несколько языков в одном файле в Visual Studio Code

Я работаю над файлом HTML, который имеет встроенные JavaScript и CSS. Однако Visual Studio Code предоставляет IntelliSense только для одного языка одновременно: HTML IntelliSense только в том…

Как включить Visual Studio 2010 .css Intellisense в файле .less

Кто-нибудь знает, как включить css intellisense в расширение файла не .css? У меня есть файл .less, который в основном является файлом .css, но visual studio не будет использовать .css intellisense…

css не связывается с файлом html в codeigniter

Я новичок в CI, чтобы проверить, как это работает, я начал с создания файла css, а затем файла html, но проблема в том, что я не могу связать свой файл css с файлом html. Это мой html: <!DOCTYPE…

Visual Studio Code CSS ошибка «не используйте пустые наборы правил»

Я использую Visual Studio Code для HTML и CSS. Я получаю ошибку, которая не ухудшает работу сайта, но я хотел бы узнать о ней больше. Когда я навожу курсор на стиль для ID в HTML, появляется окно с…

Visual Studio Code точки останова в typescript

Используя Visual Studio Code, когда я устанавливаю точку останова в своем файле .ts,она не попадает. (И не красный, когда я отлаживаю). Однако если я установлю точку останова в скомпилированном JS,…

Visual Studio Code не распознает переменные в файле CSS

я использую Visual Studio Code, и у меня есть проблема с переменными в файлах CSS, когда я набираю знак доллара, css файл сообщает об ошибке, и браузер не увидит изменений в файле.

Visual studio code php цвет не отображается в файле html

Я пытаюсь использовать код PHP в файле visual studio code HTML, но не могу получить цветовую подсветку. Я установил PHP Intellisense, но все то же самое <div class=htmlcolor> <?php echo php…

Нет HTML предложений в Visual Studio Code

Я скачал последнюю версию Visual Studio Code и пытаюсь написать код HTML. Например, <div>, <a>, <p> тегов. Однако в Visual Studio Code нет HTML предложений: Я прочитал эту статью ,…

Как просмотреть мой код HTML в браузере с Visual Studio Code?

Как просмотреть мой код HTML в браузере с новым Microsoft Visual Studio Code? С Notepad++ у вас есть возможность работать в браузере. Как я могу сделать то же самое с Visual Studio Code? Я попытался…

Visual Studio Code Не Распознает Команду CSS

Я пытаюсь изменить непрозрачность изображения с помощью CSS. Однако visual studio не распознает команду, оставляя ее проигнорированной. Другой код CSS в файле работает так, как и ожидалось. Вот код…

34 полезных расширения VS Code, которые упростят работу разработчика

Фронтенд-разработчик, UX/UI-дизайнер Савио Мартин опубликовал в блоге на dev.to 34 расширения Visual Studio Code (VS Code) для повышения продуктивности.

Вот они. 

1. Auto Rename Tag. Автоматически переименовывает парный тег «HTML/XML» так же, как Visual Studio IDE. 

2. Better Comments. Помогает создавать в коде более понятные комментарии. Расширение позволяет разбивать аннотации на следующие категории: 

  • Оповещения;
  • Запросы;
  • TODO-комментарии;
  • События. 

3. Bootstrap 4, Font Awesome 4, Font Awesome 5 Free & Pro Snippets. Плагин кода Visual Studio, содержащий фрагменты кода Bootstrap 4, Font Awesome 4, Font Awesome 5 Free и Pro Snippets. Плагин работает как в стабильной, так и в инсайдерской сборке. 

4. Bracket Pair Colorizer 2. Позволяет идентифицировать совпадающие скобки по цвету. Пользователь может определить, какие токены должны соответствовать и какие цвета использовать. 

5. change-case. Позволяет быстро изменить регистр текущего выделенного текста или слова. 

6. Code Runner. Запускает фрагмент или файл кода для нескольких языков (полный список доступен здесь) и пользовательские команды. 

7. Code Spell Checker. Цель расширения — проверка распространенных ошибок и уменьшение количества ложных срабатываний. Хорошо работает со стилем написания составных слов CamelCase (верблюжий регистр). 

8. CSS Peek. Разрешает просмотр идентификаторов CSS и строк классов как определений из HTML-файлов в соответствующий CSS-файл. Позволяет просматривать и переходить к определению. 

9. Debugger for Chrome. Расширение для отладки JavaScript-кода в браузере Google Chrome или других задач, поддерживающих протокол Chrome DevTools Protocol. 

10. EJS language support. Подсветка синтаксиса для тегов EJS, JavaScript и HTML. Включает автозаполнение javascript. 

11. ES7 React/Redux/GraphQL/React-Native snippets. Расширение для React, Redux и GraphQL в JavaScript/TypeScript с синтаксисом ES7 и функциями плагина Babel для VS Code. 

12. GitHub Pull Request and Issue. Позволяет просматривать и управлять запросами на вытягивание GitHub и проблемами в Visual Studio Code. 

13. GitLens — Git supercharged. Расширяет возможности Git, встроенные в VS Code. Среди функций: 

  • Визуализация авторства кода с помощью аннотаций Git;
  • Плавное перемещение и исследование репозитория Git;
  • Получение необходимой информации с помощью команд сравнения. 

14. Google Fonts. Расширение позволяет просматривать список шрифтов Google и вставлять их в HTML или CSS код. 

15. Image Preview. Расширение для предварительного просмотр изображений при наведении курсора. 

16. GraphQL. Добавляет подсветку синтаксиса, его проверку и языковые функции, такие как: 

  • Переход к определению;
  • Просмотр информации о наведении и автозаполнение для проектов graphql;
  • Работа с запросами, помеченными тегом gql. 

17. vscode-styled-components. Подсветка синтаксиса и IntelliSense для стилизованных компонентов. Использует грамматику CSS, построенную на основе language-sass и language-css. 

18. Prettify JSON. Расширение Prettify JSON для Visual Studio Code. 

19. Import Cost. Позволяет отображать в редакторе размер импортированного пакета. Для этого расширение использует webpack и babili-webpack-plugin. 

20. IntelliSense для имен классов CSS в HTML. Обеспечивает завершение имени класса CSS для атрибута HTML class на основе определений, найденных в рабочей области или внешних файлах, на которые ссылается элемент link. 

21. JavaScript (ES6) code snippets. Расширение содержит фрагменты кода для JavaScript в синтаксисе ES6 для редактора VS CODE. Поддерживает как JavaScript, так и TypeScript. 

22. Live Server. Запускает локальный сервер разработки с функцией перезагрузки в реальном времени для статических и динамических страниц.

23. Live Share. Расширение для совместной разработки, редактирования и отладки в режиме реального времени. Позволяет мгновенно и безопасно делиться проектами. Разработчики, которые подключаются к сеансам, получают необходимые файлы по текущему проекту и могут начать работу без необходимости клонирования репозиториев или SDK. 

24. Markdown Preview Enhanced. Расширение для тех, кто знаком с Markdown Preview Plus или RStudio Markdown. Имеет множество полезных функций, среди которых: 

  • Автосинхронизация скролла;
  • Поддержка языка диаграмм PlantUML,
  • Экспорт PDF,
  • Создание презентация. 

25. Mongo Snippets for Node-js. Расширение для проектов Node-js. Содержит: 

  • Сниппеты для подключения к документоориентированной системе управления базами данных MongoDB и запросов;
  • Команду Palette Feature для настройки кода шаблона;
  • Предложения по доработке для моделей Mongoose Models. 

26. npm. Поддерживает выполнение npm-скриптов, определенных в файле package.json, и проверку установленных модулей на соответствие зависимостям, определенным в package.json. 

27. npm Intellisense. Плагин Visual Studio Code, который автоматически заполняет модули nmp в операторах импорта. 

28. Placeholder Images. Расширение позволяет создавать и вставлять так называемые изображения-заполнители в HTML-код в VS Code с помощью сторонних сервисов, таких как Unsplash, placehold.it и LoremFlickr. 

29. Polacode. Позволяет делать скриншоты кода с пользовательскими шрифтами и темами. 

30. Prettier — Code formatter. Средство для форматирования кода. Нацелено на использование жестко заданных правил по оформлению программ. Обеспечивает согласованный стиль, анализируя код и повторно воспроизводя его с особыми правилами, которые принимают во внимание максимальную длину строки. 

31. Tabnine Autocomplete. Помощник на основе искусственного интеллекта (ИИ). Помогает кодировать быстрее и уменьшить количество ошибок. Изучает общедоступный код и использует алгоритмы глубокого обучения ИИ. 

32. Tailwind CSS IntelliSense. Расширяет возможности разработки Tailwind, предоставляя пользователям VS Code больше функций, например, автозаполнение, выделение синтаксиса и линтинг (процесс проверки исходного кода на программные и стилистические ошибки).

33. Luna Paint. Позволяет редактировать растровые изображения из VS Code. 

34. Quokka.js. Инструмент повышения производительности разработчика для быстрого прототипирования JavaScript/TypeScript. Значения времени выполнения обновляются и отображаются в IDE-среде рядом с кодом по мере его ввода.

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

webhint Visual Studio Code расширения — Microsoft Edge Development



  • Чтение занимает 2 мин

В этой статье

Используйте webhint, настраиваемый инструмент подкладки, чтобы повысить доступность, производительность, совместимость между браузерами, PWA совместимость и безопасность вашего сайта. Он проверяет код на наличие лучших практик и распространенных ошибок. Этот проект с открытым исходным кодом, изначально разработанный Microsoft Edge, теперь является частью OpenJS Foundation. Команда Microsoft Edge продолжает вносить свой вклад в веб-веб-сайты вместе с веб-разработчиками в сообществе.

Скриншот расширения веб-Visual Studio Code

Определите и исправьте проблемы в HTML, CSS, JavaScript, TypeScript и других, добавив расширение веб-Visual Studio Code . Подсказки отображаются в качестве подчеркнутой линии и суммируются в области Проблем.

Конфигурация

Это расширение использует json-файл конфигурации по умолчанию, который активирует подсказки и разметки для HTML, CSS, систем шаблонов (JSX/TSX, Angular и так далее), JavaScript/TypeScript и т. д.

{
    "connector": "local",
    "extends": [
        "accessibility",
        "progressive-web-apps"
    ],
    "formatters": [
        "html",
        "summary"
    ],
    "hints": [
        "apple-touch-icons",
        "button-type",
        "compat-api/css",
        "compat-api/html",
        "create-element-svg",
        "css-prefix-order",
        "disown-opener",
        "highest-available-document-mode",
        "manifest-exists",
        "meta-charset-utf-8",
        "meta-viewport",
        "no-bom",
        "no-protocol-relative-urls",
        "scoped-svg-styles",
        "sri",
        "typescript-config/consistent-casing",
        "typescript-config/import-helpers",
        "typescript-config/is-valid",
        "typescript-config/no-comments",
        "typescript-config/strict",
        "typescript-config/target"
    ],
    "hintsTimeout": 10000,
    "parsers": [
        "babel-config",
        "css",
        "html",
        "javascript",
        "jsx",
        "less",
        "sass",
        "typescript",
        "typescript-config",
        "webpack-config"
    ]
}

Если необходимо больше контролировать активированные подсказки и разберегатели, создайте локальный файл для .hintrc настройки веб-хинта. Для справки по выходу из определенных подсказок перейдите в руководство пользователя webhint.

Контакт с командой веб-сайтов

Отправка отзывов путем подачи проблемы в веб-GitHub репо.

Чтобы внести свой вклад в расширение, перейдите к веб-Visual Studio Code руководства по вкладу расширения.

См. также

Как настроить выходной путь к скомпилированным CSS-файлам с помощью `vscode live sass compiler extension` в windows10?

Не уверен, что это поможет кому-то, так как это было давно, но недавно у меня было несколько папок, открытых в VSCode, и каждый раз, когда я пытался использовать live sass-компилятор, он переходил в папку, которая была вверху списка, и создавал css / styles.css внутри этого каталога.

Я видел это решение на сайте создателей Live Sass Compiler:https://ritwickdey.github.io/vscode-live-sass-compiler/docs/faqs.html

То, что вы делаете, просто, допустим, у вас есть архитектура папок, подобная моей здесь. (ссылка на изображение)

Все, что вам нужно сделать, это создать папку с именем .vscode и добавить в нее файл settings.json.

Внутри settings.json вставьте следующий код:

      {
"liveSassCompile.settings.formats": [
    {
        "format": "expanded",
        "extensionName": ".css",
        "savePath": "/Parallax/css"
    },
    {
        "extensionName": ".min.css",
        "format": "compressed",
        "savePath": "/Parallax/dist/css"
    }
],

"liveSassCompile.settings.excludeList": [
    "**/node_modules/**",
    ".vscode/**"
],
"liveSassCompile.settings.generateMap": true,
"liveSassCompile.settings.autoprefix": [
    "> 1%",
    "last 2 versions"
]

}

Обратите внимание, как мой
liveSassCompile.settings.formatsотформатирован: я написал пути сохранения как / Parallax / css / и / Parallax / dist / css. Это идет в корень проекта и сохраняет файлы css внутри папок css и dist, которые находятся внутри каталога Parallax. (ссылка на изображение)

В заключение каждый раз, когда вы хотите изменить путь сохранения, все, что вам нужно сделать, это изменить
settings.json файл внутри
.vscode папку, а не изменять пользовательские настройки, что, на мой взгляд, утомительно.

Окончательная структура должна выглядеть это , как только вы редактировал
main.scss файл.

Программирование HTML

с использованием кода Visual Studio

Visual Studio Code обеспечивает базовую поддержку программирования HTML «из коробки». Есть подсветка синтаксиса, интеллектуальное завершение с помощью IntelliSense и настраиваемое форматирование. VS Code также включает отличную поддержку Emmet.

IntelliSense

По мере того, как вы вводите HTML, мы предлагаем предложения через HTML IntelliSense. На изображении ниже вы можете увидеть предлагаемое закрытие HTML-элемента

, а также контекстно-зависимый список предлагаемых элементов.

Символы документа также доступны для HTML, что позволяет быстро переходить к узлам DOM по идентификатору и имени класса.

Вы также можете работать со встроенными CSS и JavaScript. Однако обратите внимание, что сценарии и стили, включенные из других файлов, не соблюдаются, языковая поддержка смотрит только на содержимое файла HTML.

Вы можете вызвать предложения в любое время, нажав ⌃ Пробел (Windows, Linux Ctrl + Пробел).

Вы также можете указать, какие встроенные поставщики автозавершения кода активны.Переопределите их в настройках пользователя или рабочей области, если вы предпочитаете не видеть соответствующие предложения.

  // Настраивает, предлагает ли встроенный язык HTML теги, свойства и значения HTML5.
"html.suggest.html5": true

Элементы тега автоматически закрываются, когда набирается > открывающего тега.

Соответствующий закрывающий тег вставляется, когда вводится / закрывающего тега.

Вы можете отключить автоматическое закрытие тегов с помощью следующей настройки:

  дюймов HTML.autoClosingTags ": false

При изменении тега функция связанного редактирования автоматически обновляет соответствующий закрывающий тег. Эта функция не является обязательной, ее можно включить, установив:

.

  "editor.linkedEditing": true

Палитра цветов

Пользовательский интерфейс средства выбора цвета VS Code теперь доступен в разделах стиля HTML.

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

Ховер

Наведите указатель мыши на теги HTML или встроенные стили и JavaScript, чтобы получить дополнительную информацию о символе под курсором.

Проверка

Поддержка языка HTML выполняет проверку всех встроенных JavaScript и CSS.

Вы можете отключить эту проверку с помощью следующих настроек:

  // Настраивает, проверяет ли встроенная поддержка языка HTML встроенные скрипты."html.validate.scripts": true,

// Настраивает, проверяет ли встроенная поддержка языка HTML встроенные стили.
"html.validate.styles": true

Складной

Вы можете сворачивать области исходного кода, используя сворачивающиеся значки на желобе между номерами строк и началом строки. Для многострочных комментариев в исходном коде доступны области складывания для всех элементов HTML.

Кроме того, вы можете использовать следующие маркеры области для определения области складывания:
и

Если вы предпочитаете переключаться на сворачивание на основе отступов для использования HTML:

  "[html]": {
    "редактор.foldStrategy ":" отступ "
},

Форматирование

Чтобы улучшить форматирование исходного кода HTML, вы можете использовать команду Форматировать документ ⇧⌥F (Windows Shift + Alt + F, Linux Ctrl + Shift + I) для форматирования всего файла или Выбор формата ⌘K ⌘F (Windows, Linux Ctrl + K Ctrl + F), чтобы просто отформатировать выделенный текст.

Средство форматирования HTML основано на js-beautify. Параметры форматирования, предлагаемые этой библиотекой, отображаются в настройках VS Code:

  • HTML.format.wrapLineLength : Максимальное количество символов в строке.
  • html.format.unformatted : список тегов, которые не следует переформатировать.
  • html.format.contentUnformatted : список тегов, разделенных запятыми, содержимое которых не следует переформатировать.
  • html.format.extraLiners : список тегов, перед которыми должен стоять дополнительный символ новой строки.
  • html.format.preserveNewLines : следует ли сохранять существующие разрывы строк перед элементами.
  • html.format.maxPreserveNewLines : Максимальное количество переносов строк, которое должно быть сохранено в одном фрагменте.
  • html.format.endWithNewline : заканчивается новой строкой.
  • html.format.indentInnerHtml : отступ и разделов.
  • html.format.wrapAttributes : Стратегия упаковки для атрибутов:
    • авто : перенос при превышении длины строки
    • force : Обернуть все атрибуты, кроме первого
    • с принудительным выравниванием : обернуть все атрибуты, кроме первого, и выровнять атрибуты
    • force-expand-multiline : перенести все атрибуты
    • выровнено-кратное : переносить при превышении длины строки, выравнивать атрибуты по вертикали
    • сохранить : сохранить перенос атрибутов
    • сохранить с выравниванием : сохранить перенос атрибутов, но выровнять
  • HTML.format.wrapAttributesIndentSize : Размер выравнивания при использовании с принудительным выравниванием и с выравниванием, несколько в html.format.wrapAttributes или null для использования размера отступа по умолчанию.
  • html.format.templating : Учет тегов языка шаблонов django, erb, handlebars и php.
  • html.format.unformattedContentDelimiter : хранить текстовое содержимое вместе между этой строкой.

Совет: Программа форматирования не форматирует теги, перечисленные в html.format.unformatted и html.format.contentUnformatted settings. Встроенный JavaScript форматируется, если не исключены теги «скрипт».

В Marketplace есть несколько альтернативных форматеров на выбор. Если вы хотите использовать другое средство форматирования, определите
"html.format.enable": false в ваших настройках, чтобы отключить встроенное средство форматирования.

Эммет фрагменты

VS Code поддерживает расширение сниппета Emmet. Аббревиатуры Эммета перечислены вместе с другими предложениями и фрагментами в списке автозаполнения редактора.

Подсказка: Допустимые сокращения см. В разделе HTML шпаргалки Emmet.

Если вы хотите использовать сокращения HTML Emmet с другими языками, вы можете связать один из режимов Emmet (например, css , html ) с другими языками с помощью параметра emmet.includeLanguages ​​. Параметр принимает идентификатор языка и связывает его с идентификатором языка режима, поддерживаемого Emmet.

Например, чтобы использовать аббревиатуры Emmet HTML внутри JavaScript:

  {
  "Эммет.includeLanguages ​​": {
    "javascript": "html"
  }
}

Мы также поддерживаем определяемые пользователем фрагменты.

Пользовательские данные HTML

Вы можете расширить поддержку HTML в VS Code с помощью декларативного настраиваемого формата данных. Установив для html.customData список файлов JSON, следующих за пользовательским форматом данных, вы можете улучшить понимание VS Code новых тегов HTML, атрибутов и значений атрибутов. Затем VS Code предложит языковую поддержку, такую ​​как информация о завершении и наведении указателя для предоставленных тегов, атрибутов и значений атрибутов.

Подробнее об использовании пользовательских данных можно узнать в репозитории vscode-custom-data.

расширений HTML

Установите расширение, чтобы добавить больше функций. Перейдите в представление Extensions (⇧⌘X (Windows, Linux Ctrl + Shift + X)) и введите «html», чтобы увидеть список соответствующих расширений, помогающих создавать и редактировать HTML.

Совет. Щелкните плитку расширения выше, чтобы прочитать описание и отзывы, чтобы решить, какое расширение лучше всего подходит для вас. Смотрите больше на торговой площадке.

Следующие шаги

Читайте дальше, чтобы узнать о:

Общие вопросы

Есть ли в VS Code предварительный просмотр HTML?

Нет, VS Code не имеет встроенной поддержки предварительного просмотра HTML, но есть расширения, доступные в VS Code Marketplace. Откройте представление Extensions (⇧⌘X (Windows, Linux Ctrl + Shift + X)) и выполните поиск по «предварительному просмотру в реальном времени» или «предварительному просмотру HTML», чтобы увидеть список доступных расширений предварительного просмотра HTML.

05.08.2021

6 потрясающих расширений CSS для VS Code

Хотя в этом руководстве содержится контент, который, по нашему мнению, принесет большую пользу нашему сообществу, мы еще не тестировали или
отредактировал его, чтобы обеспечить безошибочное обучение.Это в нашем списке, и мы над этим работаем!
Вы можете помочь нам, нажав кнопку «сообщить о проблеме» в нижней части руководства.

Одна из самых впечатляющих частей Visual Studio Code — это настраиваемость, особенно с помощью расширений. С тоннами разработчиков, создающих расширения, функциональность буквально бесконечна ! Вот некоторые из лучших расширений VS Code для написания CSS.

Ознакомьтесь с Learn Visual Studio Code, чтобы узнать все, что вам нужно знать о самом популярном редакторе в веб-разработке!

HTML Поддержка CSS

HTML Поддержка CSS (и следующее расширение в списке) обеспечивает intellisense в ваших файлах HTML на основе CSS, который включен в ваш проект или на который имеется удаленная ссылка.Вот полный список функций.

  • Завершение атрибута класса

  • Завершение атрибута Id

  • Поддерживает завершение Zen Coding для атрибутов class и id

  • Сканирует папку рабочей области на наличие файлов css и scss

  • Поддерживает удаленные файлы css

Одна вещь, которая действительно выделяется в этом, заключается в том, что вы также можете указать удаленные файлы CSS для кеширования .Вы можете сделать это, добавив следующую настройку. Этот пример ссылается на файл CSS Bootstrap 4.

  "css.remoteStyleSheets": [
  "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"
]

Intellisense для имен классов CSS

Intellisense для имен классов CSS обеспечивает функциональность, аналогичную описанному выше расширению. Он также автоматически извлечет классы из CSS, на которые есть ссылки в ваших HTML-файлах. Эти определения классов также будут доступны через intellisense при использовании Emmet !

В любой момент вы можете запустить повторное кеширование классов из ваших файлов CSS, открыв палитру команд.

Автоприставка

Добавление префикса к определенным свойствам CSS для обеспечения поддержки браузером может быть очень сложной задачей. Если бы не рабочие процессы, уже настроенные с помощью Create React App, Angular CLI и т. Д., Я бы полностью забыл добавить префиксы поставщиков.

Autoprefixer автоматически добавит префиксы поставщиков , чтобы ваше приложение выглядело как можно лучше в разных браузерах. Это безумно просто. Откройте палитру команд и вызовите «Автопрефиксатор CSS».

CSS Peek

Если вы похожи на меня, я ненавижу переключаться на мой файл .css, чтобы проверить свойства, прикрепленные к классу или идентификатору. С помощью CSS Peek вы можете просматривать изображение вашего CSS при наведении курсора из HTML-файла .

Это расширение также превращает имена и идентификаторы классов в гиперссылку , которая ведет вас прямо к определению этого класса или идентификатора в вашем CSS!

Prettier — программа форматирования кода

Больше не беспокойтесь о форматировании.Настройте Prettier один раз, и он позаботится обо всем остальном!

Prettier — Code Formatter невероятно популярен для автоматического форматирования вашего JavaScript, но знаете ли вы, что auto — также форматирует CSS ? Что ж, это так, и это здорово!

Вот это раньше (в ужасном формате).

… и после ( с КРАСИВЫМ форматированием )!

Вы можете настроить запуск при сохранении автоматически или вручную, если хотите.

Bootstrap 4, Font awesome 4, Font Awesome 5 Бесплатные и профессиональные фрагменты

Конечно, не каждый проект использует Bootstrap или Font Awesome, но многие из них используют. Вот почему я подумал, что стоит поделиться этим расширением, которое предоставляет intellisense для Bootstrap 4, Font Awesome 4 и Font Awesome 5.

В Bootstrap так много классов, что их все невозможно запомнить. То же самое и с Font Awesome. Мне приходится искать синтаксис каждый раз, когда я хочу добавить значок, но не сейчас!

Чтобы активировать фрагменты для Bootstrap, используйте «B4».

и «FA5» для Font Awesome 5.

Резюме

Вот и несколько лучших расширений CSS для Visual Studio Code. Если вы думаете, что мы что-то упустили, оставьте комментарий ниже и поделитесь своими любимыми!

Топ-15 лучших расширений кода Visual Studio для веб-разработки

Код Visual Studio, возможно, лучший редактор кода для использования в настоящее время. Благодаря широкому спектру расширений и поддержке со стороны Microsoft этот редактор получил широкое распространение.

Код Visual Studio построен на основе редактора Monaco с открытым исходным кодом от Microsoft. Этот проект получил около 14 тысяч звезд на Github.

Код Visual Studio предлагает широкий спектр расширений. Вот как установить расширение.

Нажмите SHIFT + COMMAND (или Windows) + X или просто щелкните значок расширения кода Visual Studio. Найдите расширение и нажмите «Установить».

Здесь я перечисляю 15 лучших расширений кода Visual Studio для веб-разработки.Выбор расширения — мое личное мнение.

1: Фрагменты кода Javascript (ES6)

Нет необходимости упоминать, что JavaScript является ядром веб-разработки. Есть множество фрагментов кода, которые мы использовали ежедневно, и это расширение помогает вам не писать этот повторяющийся код снова и снова.

Он предоставляет фрагменты кода JavaScript, TypeScript, Vue, React и HTML. Я лично считаю, что это расширение необходимо для веб-разработки.

Ссылка: https: // marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets

Вы можете установить его, выполнив поиск по имени в разделе расширений кода Visual Studio.

2: CSS Peek

Как следует из названия, это расширение позволяет переходить к коду CSS, используя классы и идентификаторы.

Ссылка: https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek

Вы можете установить его, выполнив поиск по имени в разделе расширений кода визуальной студии.

3: Тег автоматического закрытия

Это расширение автоматически добавляет закрывающий тег HTML и XML. Спасибо позже 🙂

Ссылка: https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag

Вы можете установить его, выполнив поиск по имени в разделе расширений кода Visual Studio.

4: REST Client

Тестирование API и интеграция с пользовательским интерфейсом — огромная часть веб-разработки. Я уверен, что вы делали это много раз.

Я часто использовал клиенты REST, такие как Postman, для тестирования своих API.Используя это расширение, мы можем тестировать API и просматривать их ответ прямо в коде Visual Studio.

через GIPHY

Ссылка: https://marketplace.visualstudio.com/items?itemName=humao.rest-client

Вы можете установить его, выполнив поиск по имени в разделе расширений кода Visual Studio.

5: ESLint

ESLint — это утилита линтинга для JavaScript. Он проверяет ваш код на наличие распространенных ошибок и сообщает об этом в самом редакторе. Это похоже на виртуальный партнер, который проверяет ваш код, пока вы его пишете.

Ссылка: https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

Вы можете установить его, выполнив поиск по имени в разделе расширений кода Visual Studio.

Перед установкой ESLint в Visual Studio сначала установите его как глобальный пакет.

6: Prettier — Средство форматирования кода

Это расширение выполняет форматирование кода JavaScript, CSS и HTML.

Ссылка: https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

Вы можете установить его, выполнив поиск по имени в разделе расширений кода Visual Studio.

7: Путь Intellisense

Импорт кода из других файлов — это то, что каждый делает ежедневно. Это расширение ускоряет разработку за счет автозаполнения имен файлов.

Вы вводите имя файла в операторы, и он будет искать и предлагать вам варианты.

Ссылка: https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense

Вы можете установить его, выполнив поиск по имени в разделе расширений кода Visual Studio.

8: GitLens

Мы используем Git почти каждый день нашей жизни. GitLens — это плагин кода Visual Studio, расширяющий возможности git.

С GitLens так легко просматривать авторство кода, проверять номер фиксации, просматривать изменения между последней фиксацией и существующими изменениями и т. Д.

Ссылка: https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens
Вы можете установить его, выполнив поиск по имени в разделе расширений кода Visual Studio.

9: Менеджер проекта

Вы работаете над несколькими проектами и переключаетесь туда и обратно? Я знаю, что делаю, и менеджер проекта был спасителем, управляющим несколькими проектами в коде Visual Studio.

Ссылка: https://marketplace.visualstudio.com/items?itemName=alefragnani.project-manager

Вы можете установить его, выполнив поиск по имени в разделе расширений кода Visual Studio.

10: Live Server

Расширение Live Server обеспечивает предварительный просмотр вашего веб-приложения прямо в редакторе.

Это очень удобно и полезно для разработчиков интерфейса.

Ссылка: https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
Вы можете установить его, выполнив поиск по имени в разделе расширений кода Visual Studio.

11: Отладчик для Chrome

Это расширение перенесло мощный отладчик Chrome прямо в код Visual Studio.

Для интерфейсных разработчиков очень полезно выполнять тестирование и отладку.

через GIPHY

Ссылка: https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome
Вы можете установить его, выполнив поиск по имени в разделе расширений кода Visual Studio.

12: Лучшие комментарии

Это расширение помогает создавать более понятные и удобные для чтения комментарии.

Ссылка: https: //marketplace.visualstudio.com / items? itemName = aaron-bond.better-comments
Вы можете установить его, выполнив поиск по имени в разделе расширений кода Visual Studio.

13: Code time

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

Очень полезно отслеживать и видеть прогресс. Это не только для веб-разработки, это расширение может использовать кто угодно.

Ссылка: https://marketplace.visualstudio.com / items? itemName = softwaredotcom.swdc-vscode
Вы можете установить его, выполнив поиск по имени в разделе расширений кода Visual Studio.

14: Синхронизация настроек

Я использую другую машину для работы и личного пользования. Я использую код Visual Studio на обеих машинах, однако я не хочу каждый раз повторять одни и те же шаги для настройки редактора.

Переход к настройке расширения Sync. Он создает и хранит вашу конфигурацию в Github gist и синхронизирует там, где вы хотите.Просто и здорово!

Ссылка: https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync
Вы можете установить его, выполнив поиск по имени в разделе расширений кода Visual Studio.

15: Polacode

Понравился такой фрагмент кода?

Тогда это расширение для вас. Мы можем использовать это расширение, чтобы создать красивый поляроид кода и поделиться им.

Ссылка: https://marketplace.visualstudio.com/items?itemName=pnp.polacode

Вы можете установить его, выполнив поиск по имени в разделе расширений кода Visual Studio.

Заключение

Если вам понравилась эта статья, поделитесь ею в социальных сетях, чтобы помочь распространить информацию. Спасибо за прочтение!

Дальнейшее изучение

Топ-5 обязательных расширений кода Visual Studio
Учебное пособие по MySQL для Node.js
Все статьи по программированию Codeforgeek
Как проверить, существует ли файл в Node.js

microsoft / vscode-css-languageservice: CSS, Языковая служба LESS & SCSS, извлеченная из VSCode, для повторного использования, например, в редакторе Monaco.

Языковые услуги для CSS, LESS и SCSS

Почему?

Служба vscode-css-languageservice содержит языковые умения, лежащие в основе редактирования CSS, LESS и SCSS в Visual Studio Code.
и редактор Монако.

  • doValidation анализирует входную строку и возвращает синтаксические ошибки и ошибки lint.
  • doComplete предоставляет предложения завершения для данного местоположения.
  • doHover предоставляет текст наведения для заданного местоположения.
  • findDefinition находит определение символа в заданном месте.
  • findReferences находит все ссылки на символ в указанном месте.
  • findDocumentHighlights находит все символы, связанные с заданным местоположением.
  • findDocumentSymbols предоставляет все символы в данном документе
  • doCodeActions оценивает действия кода для данного местоположения, как правило, для устранения проблемы.
  • findColorSymbols оценивает все цветные символы в данном документе
  • doRename переименовывает все символы, связанные с данным местоположением.
  • getFoldingRanges возвращает диапазоны сворачивания в данном документе.

Установка 

  npm install --save vscode-css-languageservice

API

Полный API см. В cssLanguageService.ts и cssLanguageTypes.ts

Развитие

  • клонировать это репо, запустить пряжу
  • Тест пряжи для компиляции и проведения тестов

Как запустить и отладить службу?

  • откройте папку в VSCode.
  • установить точки останова, например в cssCompletion.ts
  • запускает модульные тесты из окна просмотра запуска и ждет, пока не будет достигнута точка останова:

Как запустить и отладить службу внутри экземпляра VSCode?

  • запустите VSCode из исходных кодов, как описано здесь: https: // github.com / Microsoft / vscode / wiki / How-to-Contribute
  • использовать ссылку пряжи vscode-css-languageservice в vscode / extensions / css-language-features / server для запуска VSCode с последними изменениями из vscode-css-languageservice
  • запустите VSCode из исходного кода ( vscode / scripts / code.sh | bat ) и откройте файл .css
  • в окне VSCode, которое открыто в источниках vscode-css-languageservice , запустите команду Debug: Attach to Node process и выберите процесс code-oss с путем css-language-features
  • установить точки останова, e.г. в cssCompletion.ts
  • в экземпляре, запущенном из источников, вызвать завершение кода в файле .css

Примечание. Все сущности CSS (свойства, правила и т. Д.) Получены из https://github.com/microsoft/vscode-custom-data/tree/master/web-data и переданы здесь. Чтобы добавить новое свойство или исправить описание завершения / наведения существующих свойств, пожалуйста, откройте PR там).

Лицензия

(лицензия MIT)

Авторские права 2016, 20 Microsoft

За исключением build / mdn-documentation.js , созданный на основе контента из Mozilla Developer Network.
и распространяется под CC BY-SA 2.5.

34 Ultimate VS Code Extensions для повышения производительности! 💪

Это Савио. Я молодой разработчик с намерением стать успешным веб-разработчиком. Мне нравится создавать веб-приложения с помощью React. Я доказал свое превосходство в интерфейсных технологиях.

Сегодня я покажу вам 34 совершенных расширения VS Code для повышения вашей производительности. Я почти уверен, что вам понравится этот огромный список потрясающих расширений VS Code.

Автоматически переименовывать парный тег HTML / XML, как это делает Visual Studio IDE.

Расширение Better Comments поможет вам создавать в коде более понятные для человека комментарии.

Плагин кода Visual Studio, содержащий фрагменты кода Bootstrap 4, Font awesome 4 и Font Awesome 5 Free и Pro. Этот плагин работает как в стабильной, так и в инсайдерской сборке.

Это расширение позволяет идентифицировать совпадающие скобки по цвету.Пользователь может определить, какие токены будут соответствовать и какие цвета использовать.

Обертка вокруг регистра изменения узла для кода Visual Studio. Быстро изменить регистр текущего выделения или текущего слова.

Выполнить фрагмент кода или файл кода для нескольких языков: C, C ++, Java, JavaScript, PHP, Python, Perl, Perl 6, Ruby, Go, Lua, Groovy, PowerShell, BAT / CMD, BASH / SH, F # Script, F # (.NET Core), C # Script, C # (.NET Core), VBScript, TypeScript, CoffeeScript, Scala, Swift, Julia, Crystal, OCaml Script, R, AppleScript, Elixir, Visual Basic.NET, Clojure, Haxe, Objective-C, Rust, Racket, Scheme, AutoHotkey, AutoIt, Kotlin, Dart, Free Pascal, Haskell, Nim, D, Lisp, Kit, V, SCSS, Sass, CUDA, Less, Fortran и пользовательская команда

Базовая программа проверки орфографии, которая хорошо работает с кодом camelCase. Цель этого средства проверки правописания — помочь выявить распространенные орфографические ошибки, сохраняя при этом низкое количество ложных срабатываний.

Разрешить просмотр идентификаторов CSS и строк класса как определений из файлов HTML в соответствующий CSS.Позволяет просматривать и переходить к определению.

Расширение VS Code для отладки кода JavaScript в браузере Google Chrome или других целях, поддерживающих протокол Chrome DevTools.

Подсветка синтаксиса для тегов EJS, Javascript и HTML. Включает автозаполнение javascript.

Простые расширения для React, Redux и Graphql в JS / TS с синтаксисом ES7

Это расширение позволяет просматривать и управлять запросами на вытягивание GitHub и проблемами в Visual Studio Code.

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

Это расширение позволяет просматривать список шрифтов Google и вставлять в код HTML или CSS

Показывает предварительный просмотр изображения в желобе и при наведении курсора

Расширение GraphQL для VSCode добавляет выделение синтаксиса, проверку и языковые функции, такие как переход к определению, информация о наведении и автозаполнение для проектов graphql.Это расширение также работает с запросами, помеченными тегом gql.

Подсветка синтаксиса для стилизованных компонентов

Код Visual Studio Prettify JSON Extension

Это расширение будет отображать в редакторе встроенный размер импортированного пакета. Расширение использует webpack с babili-webpack-plugin для определения импортированного размера.

Завершение имени класса CSS для атрибута класса HTML на основе определений, найденных в вашей рабочей области.

Это расширение содержит фрагменты кода для JavaScript в синтаксисе ES6 для редактора кода Vs (поддерживает как JavaScript, так и TypeScript).

Запустить локальный сервер разработки с функцией перезагрузки в реальном времени для статических и динамических страниц

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

Markdown Preview Enhanced перенесен на vscode

Предоставляет фрагменты, шаблонный код для запросов Mongo и предложения по завершению для моделей мангуста.

Это расширение поддерживает выполнение сценариев npm, определенных в файле package.json, и проверку установленных модулей на предмет зависимостей, определенных в package.json.

Плагин Visual Studio Code, который автоматически заполняет модули npm в операторах импорта

Создавайте и вставляйте изображения-заполнители в свой HTML-код в Visual Studio Code с помощью различных сторонних сервисов, таких как Unsplash, placehold.it, LoremFlickr и других

Polaroid для вашего кода

Prettier — категоричный форматтер кода.Он обеспечивает согласованный стиль, анализируя ваш код и повторно распечатывая его со своими собственными правилами, которые принимают во внимание максимальную длину строки, при необходимости упаковывая код.

Tabnine — это мощный помощник по искусственному интеллекту, разработанный, чтобы помочь вам кодировать быстрее, уменьшить количество ошибок и выявить передовые методы кодирования — не покидая комфорта VSCode.

Tailwind CSS IntelliSense расширяет возможности разработки Tailwind, предоставляя пользователям Visual Studio Code расширенные функции, такие как автозаполнение, выделение синтаксиса и линтинг.

Luna Paint — это расширение VS Code, которое позволяет редактировать растровые изображения из редактора, просто откройте изображение в проводнике и начните редактировать, как любой другой файл.

Quokka.js — это инструмент повышения производительности разработчика для быстрого прототипирования JavaScript / TypeScript. Значения времени выполнения обновляются и отображаются в вашей среде IDE рядом с кодом по мере ввода.

👀 Заключение

Да, это конец. Надеюсь, вам понравилась статья.Не стесняйтесь делиться своими отзывами. Я в Твиттере @ saviomartin7. Дайте подписаться!

Следуйте за мной на Github @saviomartin, не пропустите мои потрясающие проекты! 💯

Знаете больше, добавляйте в комментарии. Отзывы приветствуются! 🙌
Удачного дня!

🌎 Давайте подключимся

🙌 Поддержка

Мои проекты подпитываются кофе ☕, купи мне один!

Настройка кода Visual Studio (часть 2) — настройки HTML, CSS и JavaScript

9 февраля 2018

Эй, это Зелл.Добро пожаловать во вторую часть серии статей о настройке кода VS.

Если вы еще не смотрели первую часть, я предлагаю вам сначала посмотреть ее, потому что все, что мы собираемся сделать сегодня, следует из этого. Оттуда все следует.

В этом видео мы собираемся настроить код VS для правильного написания HTML, CSS и JavaScript. Давайте сначала поработаем над HTML.

Форматировать при сохранении

Первое, что я хотел бы сделать, это добавить editor.formatOnSave в ваш файл настроек.Если этот параметр включен, VS Code будет форматировать или (украшать) ваш код при сохранении файла. Это очень полезно для поддержания хорошего качества кода.

  {
  "editor.formatOnPaste": true,
  "editor.formatOnSave": true,
}

Настройки HTML

VS Code имеет странный способ разделения строк по количеству символов. Если у вас есть длинный абзац текста в вашем HTML и если вы нажмете «Сохранить», вы можете заметить, что длинный абзац разбивается на две строки кода.Это довольно странно, потому что вы хотите использовать HTML-теги для их правильного разделения.

Что я сделаю, так это установлю для свойства wrapLineLength значение 0. Это предотвратит странное поведение VS Code. Пока я работаю над HTTML, я также установил для предложений angular1 и ionic значение false, поскольку я их не использую.

  {
  "html.format.wrapLineLength": 0,
  "html.suggest.angular1": ложь,
  "html.suggest.ionic": ложь,
}

Это все, что касается файла настроек.

Расширения HTML

VS Code имеет красивые расширения кода HTML. Я использую следующие расширения:

  1. Автоматическое закрытие тега
  2. Тег автоматического переименования
  3. intellisense для имен CSS

Тег автоматического закрытия помогает автоматически закрывать теги HTML. Вы можете писать меньше нажатий клавиш, что всегда является преимуществом.

Тег автоматического переименования помогает переименовать закрывающий тег при изменении открывающего тега. Это спасательный круг, потому что я всегда забываю переименовать закрывающий тег, когда меняю открывающий тег.

Intellisense для имен классов дает вам автоматическое завершение классов, когда вы пишете классы. Это не всегда работает, но когда работает, то полезно. Я понятия не имею, почему это работает или почему иногда нет. Для меня это бонус.

Это все для HTML. Перейдем к CSS.

CSS

Для CSS я устанавливаю следующие расширения.

  1. Sass
  2. Красивее
  3. Stylelint
  4. CSS Peek

Sass предоставляет подсветку синтаксиса для файлов Sass (как .sass и .scss ). Я использую Sass всякий раз, когда пишу CSS, так что это не проблема.

Prettier — лучшее средство форматирования CSS, которое я когда-либо видел. Когда вы устанавливаете prettier, вы можете нажать «Сохранить», и ваши файлы CSS или Sass будут отформатированы должным образом. Вы даже можете добавить интеграции stylelint, что будет полезно, если вы более продвинуты в части настройки.

Stylelint — это CSS Linter. Линтер — это инструмент, который проверяет ваш файл на соответствие форматированию.Он также сообщает вам, когда произошла ошибка, чтобы вы не допустили глупых опечаток.

CSS Peek дает вам возможность искать CSS-селекторы в файле. Это помогает, когда у вас есть длинный файл CSS.

Что касается настроек, я установил prettier.stylelintIntegration и stylelint.enable с до true . Вот и все. Если вы не используете stylelint, вам нечего настраивать.

  {
  "prettier.stylelintIntegration": true,
  "stylelint.enable ": true,
}

JavaScript

Для JavaScript я устанавливаю следующие расширения.

  1. Стандартный стиль JavaScript
  2. Стандартные фрагменты кода JavaScript
  3. Возвышенный Вавилон
  4. нпм intellisense

Стандартный стиль JavaScript

Стандартный стиль JavaScript — это линтер, который следует стандартному формату JavaScript. Это популярный формат, созданный парнем по имени @feross. Он содержит линтер плюс форматтер.Но заставить работать форматтер непросто.

Чтобы средство форматирования работало с VSCode, необходимо отключить средство форматирования по умолчанию, встроенное в VS Code. Для этого вы установите javascript.validate.enable на false .

  {
  "javascript.validate.enable": ложь,
}

Чтобы стандартный стиль JavaScript работал с Prettier, вам также необходимо отключить модуль форматирования по умолчанию, встроенный в VSCode. Вы можете сделать это, добавив «javascript» в красивее.disableLanguages ​​. Я также добавляю javascriptreact и json к массиву отключенных языков.

  {
  "prettier.disableLanguages": [
    "javascript",
    "javascriptreact",
    "json"
  ]
}

Затем вам нужно включить средство форматирования стандартного стиля JavaScript с standard.autoFixOnSave и standard.validate .

  {
  "standard.autoFixOnSave": true,
  "standard.validate": [
    "javascript",
    "javascriptreact"
  ],
}

Стандартные фрагменты кода JavaScript дает вам несколько фрагментов, которые могут помочь вам увеличить скорость кодирования.Например, если вы наберете cl, а затем табуляцию, вы получите console.log . Вы можете найти список ключевых слов расширения сниппета в самом сниппете.

Sublime Babel дает вам лучшую подсветку синтаксиса для файлов JavaScript, когда вы используете новый синтаксис JavaScript через Babel. Это говорит само за себя, поэтому я не буду больше говорить.

npm intellisense хорош, когда вы используете модули npm в своем коде. Это помогает вам автоматически заполнять модули узлов, и это здорово.

Подведение итогов

Вот как я настраиваю VS Code для HTML, CSS и JavaScript.

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

Если вам понравилась эта статья, расскажите о ней другу! Поделитесь этим в Твиттере. Если вы заметили опечатку, я буду признателен, если вы сможете исправить ее на GitHub. Спасибо!

Windi CSS Intellisense для VS Code

Windi CSS IntelliSense расширяет возможности разработки Windi, предоставляя пользователям Visual Studio Code расширенные функции, такие как автозаполнение, выделение синтаксиса, сворачивание кода и построение.

# Установка

Установить через Visual Studio Code Marketplace →

Установить через Open VSX Registry →

Этот плагин содержит компилятор windicss, поэтому вы можете использовать его без установки windicss, а также поддерживает файл конфигурации (попутный ветер | windi) .config. (js | cjs | ts) .

# Features

# Autocomplete

Интеллектуальные предложения для утилит и вариантов.

# Hover Preview

Просмотрите полный CSS для имени класса, наведя на него курсор.

# Выделение синтаксиса

Выделение служебных программ, вариантов и важных элементов.

# Color Preview

Предварительный просмотр цвета и спектра.

# Складывание кода

Сверните слишком длинные классы, чтобы улучшить читаемость.

# Команды компиляции

Встроенные команды, управление одной клавишей.

# Настройки расширения

Настройки тип по умолчанию описание
windicss.enableColorDecorators boolean true Включение цветовых декораторов.
windicss.enableHoverPreview boolean true Включите наведение className для предварительного просмотра CSS.
windicss.enableCodeCompletion boolean true Включение / отключение завершения всех кодов.
windicss.enableUtilityCompletion boolean true Включить завершение служебной программы.
windicss.enableVariantCompletion boolean true Включить завершение варианта.
windicss.enableDynamicCompletion boolean true Включить динамическое завершение утилит, например p — $ {int}.
windicss.enableRemToPxPreview boolean true Включить предварительный просмотр Rem to Px.
windicss.enableCodeFolding boolean true Включить сворачивание кода ClassNames.
windicss.foldByLength boolean false Код складывания по длине. Параметр по умолчанию — false, будет сбрасываться по подсчету полезности.
windicss.foldCount номер 3 Используется foldByCount.
windicss.foldLength номер 25 Используется foldByLength
windicss.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Перепечатка и любое использование материалов сайта допускается только с разрешения автора
© 2008-2024 Evgeniy Krysanov Карта Сайта