Css peek vs code

10 полезных плагинов VS Code для вёрстки

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

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

HTML Preview

Когда вы готовите разметку по макету, приходится часто переключаться на браузер и проверять, что вы сверстали. Плагин HTML Preview решает эту проблему и экономит массу времени — размеченную страницу видно прямо в окне VS Code, а превью меняется сразу после сохранения HTML-файла.

Чтобы включить предпросмотр, нажмите CTR+K V в Windows или Cmd+K V в OS X.

Live Server

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

Не забывайте отключать плагин с помощью «Stop Live Server».

CSS Peek

Позволяет быстро просматривать CSS-правила, применяемые к различным HTML-элементам. Достаточно кликнуть правой кнопкой мыши на селектор в вашем HTML файле и воспользоваться функцией «Перейти к определению» или «Подсмотреть определение».

Prettier — code formatter

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

Colorize

Показывает цвета в CSS-файлах. Поддерживает CSS-переменные, HSL, RGB/RGBA и HEX-цвета.

Auto rename tag

Автоматически переименовывает парные теги в HTML и JSX. Меняете открывающий тег — меняется и закрывающий. Вся магия на гифке:

Path autocomplete

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

HTML CSS Support

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

Icon Fonts

Фрагменты популярных иконочных шрифтов. Например: Font Awesome, Ionicons, Glyphicons, Octicons, значки Material Design.

Code Time

Отслеживайте прямо в редакторе время написания кода, время встреч, добавив свои данные из Outlook или Google-календаря и тогда всё будет в одном календаре. Наглядно увидите границу между работой и личной жизнью — возможно, стоит уделять работе поменьше времени и отдыхать.

Материалы по теме

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Источник

7 расширений для VS Code, установив которые, вы не захотите выходить из редактора

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

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

Но на Visual Studio Marketplace, на площадке, где публикуются расширения для VS Code, опубликовано просто невероятное количество расширений. А это значит, что программистам сложно находить именно то, что им действительно пригодится. Если некое расширение показалось кому-то полезным, то оно, вполне возможно, принесёт пользу и другим людям. Поэтому я расскажу здесь о 7 расширениях для VS Code, которые способны значительно облегчить работу программиста. Всё это — бесплатные расширения. Любой может свободно их загружать и использовать.

1. REST Client

Расширение REST Client позволяет, прямо из VS Code, отправлять HTTP-запросы, и тут же просматривать ответы на них. Это расширение позволяет попрощаться с внешними приложениями, которые иначе пришлось бы использовать для выполнения запросов к серверам.

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

С его помощью очень просто и удобно создавать и отправлять запросы. При работе с ним используются чёткие синтаксические конструкции, облегчающие его применение в самых разных ситуациях. Например, для отправки простого GET-запроса достаточно одной строки кода, в которой имеется ключевое слово GET и присутствует URL.

В общем, рекомендую испытать это расширение всем, кому нужен функционал REST-клиента.

2. CSS Peek

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

Ниже показан процесс работы с CSS Peek.

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

3. Beautify

Если вам нравится чистый код, то вам, определённо, придётся по душе расширение Beautify. Оно позволяет форматировать код. Beautify поддерживает JavaScript, HTML, CSS, Sass и JSON.

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

Beautify, с более чем 5 миллионами загрузок, входит в топ-20 самых популярных расширений.

4. Auto Rename Tag

Расширение Auto Rename Tag решает весьма простую задачу, но, несмотря на это, оно способно занять достойное место в наборе инструментов программиста. А именно, оно автоматизирует задачу переименования HTML-тегов. В частности, если переименовывают открывающий тег, меняется и закрывающий тег. То же самое происходит и при переименовании закрывающего тега.

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

Работа с Auto Rename Tag

5. Quokka.js

Расширение Quokka.js — это нечто вроде «песочницы» для экспериментов с кодом, встроенной прямо в редактор. Она позволяет работать с файлами, выводя соответствующие подсказки непосредственно в коде. Эти подсказки появляются в процессе ввода текста программы, что очень удобно.

6. Night Owl

Чего стоит оптимизация VS Code без использования изумительной темы? Программисты проводят очень много времени, работая в редакторе, поэтому — чем привлекательнее выглядит редактор — тем лучше.

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

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

7. JavaScript (ES6) code snippets

Расширение JavaScript (ES6) code snippets, завершающее этот материал, предлагает разработчику набор сниппетов, которые позволяют быстро создавать современные JavaScript-конструкции.

Например, если, пользуясь этим расширением, ввести clg и нажать Enter — в код попадёт console.log . Для того чтобы освоить все имеющиеся в этом расширении сниппеты может понадобиться некоторое время. Но тот, кто внедрил в работу JavaScript (ES6) code snippets, сможет по-настоящему быстро писать современный JS-код. Это окупает время, потраченное на изучение данного расширения.

Какими расширениями для VS Code пользуетесь вы?

Источник

CSS Peek

Allow peeking to css ID and class strings as definitions from html files to respective CSS. Allows peek and goto definition.

Backed By

Record once, scale to a million. Windsor’s novel AI lets businesses easily scale personalized videos. Now you can use personal videos for sales, ecommerce, education, recruiting, or anything else, without the effort.
Learn More
Manage pull requests and conduct code reviews in your IDE with full source-tree context. Comment on any line, not just the diffs. Use jump-to-definition, your favorite keybindings, and code intelligence with more of your workflow.
Learn More

Functionality

• Peek: load the css file inline and make quick edits right there. ( Ctrl+Shift+F12 )
• Go To: jump directly to the css file or open it in a new editor ( F12 )
• Hover: show the definition in a hover over the symbol ( Ctrl+hover )

In addition, it supports the Symbol Provider so you can quickly jump to the right CSS/SCSS/LESS code if you already know the class or ID name (You need to enter atleast 2 characters for this to work. This command can take a few seconds if you have large stylesheets)

Configuration

• cssPeek.supportTags — Enable Peeking from HTML tags in addition to classnames and IDs. React components are ignored, but it’s a good idea to disable this feature when using Angular.
• cssPeek.peekFromLanguages — A list of vscode language names where the extension should be used.
• cssPeek.peekToExclude — A list of file globs that filters out style files to not look for. By default, node_modules and bower_components

See editor docs for more details

Contributing

Contributions are greatly appreciated. Please fork the repository and submit a pull request.

Changelog

4.4.0

4.3.5

4.3.4

4.3.2

4.2.0

4.1.1

3.0.2

2.2.0

2.1.1

2.1.0

2.0.3

2.0.2

• Fix bug that limited the language support only to HTML. Now supports all languages provided by «activeLanguages» config

2.0.1

2.0.0

• A complete rewrite featuring the new Language Server Protocol
• Added scss support
• Added multi definition support (provides all CSS rules matching the selector)
• Added support for HTML tag selectors

1.3.3

1.3.0

1.2.4

1.2.3

1.2.2

• Better recognition of CSS selector word from cursor position
• Optimize code for fewer file lookups

1.2.1

1.2.0

1.1.0

1.0.0

Источник

CSS Peek

Allow peeking to css ID and class strings as definitions from html files to respective CSS. Allows peek and goto definition.

Backed By

Record once, scale to a million. Windsor’s novel AI lets businesses easily scale personalized videos. Now you can use personal videos for sales, ecommerce, education, recruiting, or anything else, without the effort.
Learn More
Manage pull requests and conduct code reviews in your IDE with full source-tree context. Comment on any line, not just the diffs. Use jump-to-definition, your favorite keybindings, and code intelligence with more of your workflow.
Learn More

Functionality

• Peek: load the css file inline and make quick edits right there. ( Ctrl+Shift+F12 )
• Go To: jump directly to the css file or open it in a new editor ( F12 )
• Hover: show the definition in a hover over the symbol ( Ctrl+hover )

In addition, it supports the Symbol Provider so you can quickly jump to the right CSS/SCSS/LESS code if you already know the class or ID name (You need to enter atleast 2 characters for this to work. This command can take a few seconds if you have large stylesheets)

Configuration

• cssPeek.supportTags — Enable Peeking from HTML tags in addition to classnames and IDs. React components are ignored, but it’s a good idea to disable this feature when using Angular.
• cssPeek.peekFromLanguages — A list of vscode language names where the extension should be used.
• cssPeek.peekToExclude — A list of file globs that filters out style files to not look for. By default, node_modules and bower_components

See editor docs for more details

Contributing

Contributions are greatly appreciated. Please fork the repository and submit a pull request.

Changelog

4.4.0

4.3.5

4.3.4

4.3.2

4.2.0

4.1.1

3.0.2

2.2.0

2.1.1

2.1.0

2.0.3

2.0.2

• Fix bug that limited the language support only to HTML. Now supports all languages provided by «activeLanguages» config

2.0.1

2.0.0

• A complete rewrite featuring the new Language Server Protocol
• Added scss support
• Added multi definition support (provides all CSS rules matching the selector)
• Added support for HTML tag selectors

1.3.3

1.3.0

1.2.4

1.2.3

1.2.2

• Better recognition of CSS selector word from cursor position
• Optimize code for fewer file lookups

1.2.1

1.2.0

1.1.0

1.0.0

Источник