Css navigation vs code не работает

Note that the JSX template doesn’t provide completion for attribute value by default, you may trigger it manually by clicking Ctrl + Space , or change settings:

Workspace symbols

Allows to search workspace symbols in CSS & Scss & Less files across all activated workspace folders.

Class Name and ID Completion

Provides class name and id completion for your HTML files.

Note that the extension doesn’t support remote sources, and doesn’t follow the
tags in your HTML file to limit the completion results, it just lists all the defined class & id name in CSS & Scss & Less files in your workspace folders.

Find All References and Peek References

Supports looking for CSS selector references in your HTML files.

This functionality should not be very usefull, and it needs to load and parse all the files configured in activeHTMLFileExtensions additionally. but if you love examining and refactoring CSS codes, at least it’s much better than searching them in folders.

Features miscellaneous

• Can goto referenced files after clicking
• or @import «. » .
• Supports auto completion, goto definitions for inner style tags or css . template strings.

Configuration

Why started this project

At beginning, this project is a fork from vscode-css-peek, which uses vscode-css-languageservice as CSS parser, I just fixed some Scss nesting reference issues.

Then I found it eats so much CPU & memory. E.g., one of my project has 280 CSS files out of 5500 files, includes 6 MB codes. On my MacBook Pro, it needs 7s to load (1.3s to search files and 6s to parse), and uses 700 MB memory. Otherwise it keeps parsing files every time you input a character, if CSS document is more than 100 KB, CPU usage will keep high when inputing.

Finally I decided to implement a new css parser, which also supports Scss & Less naturally, as a result I created a new extension. The CSS parser is very simple and not 100% strict, but it’s fast and very easy to extand. Now it costs about 0.8s to search files, and 0.5s to parse them. Memory usage in caching parsed results is only about 40 MB.

Otherwise, all the functionality will be started only when required by default, so CSS files are loaded only when you begin to search definitions or others.

After files loaded, The extension will track file and directory changes, creations, removals automatically, and reload them if needed.

Further more, I found the extension can support class name and id completion by the same core, so I do it with very few codes.

Finding references uses another core, I implement it because my work have a heavy CSS part, and I love refactoring CSS codes. I believe few people would need it.

Stress Test & Performance

I loaded 100 MB (0.9 M declarations, 2.8 M lines) CSS files for stress test, it took 8s to parse them, and used about 850 MB memory. After 1 minute, the memory usage fell back to 550 MB. Searching definitions across all 0.9 M declarations cost about 50ms, searching workspace symbols cost about 500ms, and searching completions cost about 230ms.

My environment is Win10, MacBook Pro 2014 version, with power on.

Plans & More

I just switched from Sublime Text to VSCode, and I love VSCode so much.

I have plans to make this extension grow, I hope it can serve more frontend developers like me.

So please give me your feedback. Thanks.

Can I change definition order to make sass files always before the css files?

No, VSCode always sort the definition results, seems in name order. If you don’t like duplicate css definitions, you can remove the css in activeCSSFileExtensions option, or compile css file to the same folder, and keep ignoreSameNameCSSFile as true .

From version 1.3.0 there is a ignoreFilesBy option, you may specify to ignore css files listed in your .gitignore .

Can’t get definitions across all workspace folders.

By default, definition searching is limited in the same workspace folder, that means when you choose Go to definition in a html file, the definitions you got are always come from the same workspace folder where the html file in. Searching references, completions also works like this.

If you have more than one folders in your workspace, and you definitely need to find definitions across them, set searchAcrossWorkspaceFolders to true .

Missed some workspace symbols.

Workspace symbols are always come from multiple workspace folders, but for each workspace folder, you need to open one HTML or CSS file to activate it, then it will return results belong to it.

Set searchAcrossWorkspaceFolders to true will also activate services for all workspace folders as soon as possibile, then you will get full workspace symbols always.

How the extension filter selectors?

This extension only compare the last part of the selector, the parts are defined by spliting selector by space or several other characters like > , + , ‘

So when you are trying to find definitions for class=»class1″ , these selectors will match: p .class1 , p.class1 , .class1.class2 , .class2.class1 , .class1:hover .

Searching tag definition is a little different, it must be the unique part of the selector, which means p will not match div p , but matches p:hover . This can prevent you got so many results.

Searching completion works in the same way.

Searching workspace symbols have a more strict rule than other extensions, which requires the start word boundary must match.

Many duplicate definotions got. Can you limit the results to only in files specified by
tags, or check parent nodes to ensure the whole selector match?

It sounds like a good idea. For a complete static project, It should be very easy to follow
tags, matching whole selector is much harder, but it can also be done.

But the Web architecture is extremely complex today, all you got in your hand may be just a piece of html codes, an unique class name, which cause we can’t get enough infomation about the context.

My suggestion is using unique class name, avoid nesting, which would be also helpful for the code quality of you project.

If you prefer scoped style, and write html and css codes in the same file, searching definitions should be less important for you. But checking option alsoSearchDefinitionsInStyleTag will help you to search css definitions in the inside your current document.

Источник

Настройка Visual Studio Code для верстальщика: установка, добавление плагинов, отладка

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

Первое знакомство с Visual Studio Code

Для начала рассмотрим, как скачать, установить, запустить (даже на очень слабом компьютере) и настроить Visual Studio Code. Вообще с этим проблем не должно возникнуть, так как на Windows все делается на интуитивно понятном уровне. Если у вас уже установлен этот редактор кода и в него внесены какие-то настройки, то лучше выполнить его полное удаление и, после чистой установки, настроить его заново.

Удаление VS Code ничем не отличается от удаление обычной программы. В Windows это можно сделать через “Панель управления”. Однако, чтобы наверняка убрать из памяти компьютера все настройки и ранее добавленные плагины рекомендуется провести очистку папки .vscode, которая расположена по адресу: C:\Пользователи\Ваше_имя_пользователя. Также очистите папку Code, что расположена в каталоге Roaming в AppData.

Скачивание и установка VS Code

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

1. Перейдя на главную страницу сайта разработчика воспользуйтесь кнопкой “Download”. По умолчанию сайт должен определить вашу ОС, но если он этого не сделал, то выберите ее самостоятельно в контекстном меню кнопки загрузки.

Скачивание VS Code

2. Ожидайте скачивание исполняемого файла. Запустите его, чтобы начать процесс установки.

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

Установка VS Code

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

С запуском VS Code не должно возникнуть проблем на большинстве современных машин. Исключениями могут является старые компьютеры или модели со слабыми процессорами. На них запуск редактора кода может либо занимать слишком много времени, либо выдавать просто черное окно, плюс, возможно появление проблем непосредственно в процессе работы. Еще сильнее “облегчить” Visual Studio Code можно с помощью изменения свойств ярлыка программы:

1. Кликните правой кнопкой мыши по ярлыку и откройте “Свойства” в контекстном меню.

2. В поле “Объект”, в самом конце пути пропишите флаг: —disable-gpu.

Оптимизация VS Code

После этого VS Code должен без проблем запускаться и работать даже на очень слабых машинах.

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

1. Переключитесь во вкладку плагинов. В поисковой строке введите “Russian Language Pack for Visual Studio Code”.

2. В результатах выдачи сразу покажут страницу этого плагина. Нажмите кнопку “Install”. После этого программа попросит перезапустить ее и откроется уже с русифицированным интерфейсом.

Установка русского языка для VS Code

Интерфейс Visual Studio Code

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

Строка состояния

В самой нижней части интерфейса окна программы находится строка состояния. Там показывается количество ошибок и предупреждений, которые возникли в ходе выполнения кода. Также в этой области может выводится информация о состоянии тех или иных плагинов. Для получения подробной информации о предупреждениях и ошибках воспользуйтесь сочетанием клавиш Ctrl+Shift+M.

Вкладка “Вывод”

В этой вкладке отображается информация о работе всех программ и систем редактора. Ее можно отфильтровать по категориям с помощью переключателя в верхней части.

Вкладка “Терминал”

Здесь находится что-то вроде встроенной “Командной строки”. С помощью переключателя в верхнем части можно менять оболочки терминала. Также терминал можно условно разделить на несколько, например, с разными оболочками.

Терминал VS Code

Панель действий

Левая панель, на которой расположены основные элементы интерфейса, с которым разработчику придется взаимодействовать чаще всего:

1. Встроенный файловый менеджер. Здесь отображается файловая структура выбранного проекта с папками и файлами. С его помощью удобно вызывать нужный файл для редактирования. Также во встроенном проводнике можно создавать новые файлы и директории проекта.

Файловый менеджер VS Code

2. Поиск. Позволяет находить определенный фрагмент кода в открытых файлах проекта.

Поисковая строка VS Code

3. Центр управления и контроля версий. Позволяет осуществлять контроль версий проекта, например, с помощью Git.

Центр контроля версий VS Code

4. Запуск и отладка приложений. С помощью этого инструмента можно запускать выполнение кода и смотреть на его поведение. Функциональность можно расширить за счет дополнительных плагинов.

5. Расширения. Отсюда можно выполнить установку новых плагинов для VS Code, а также просмотреть список уже установленных.

Менеджер расширений VS Code

6. Настройки аккаунта. Вы можете авторизоваться в своем профиле, чтобы применить уже установленные ранее настройки для VS Code.

7. Настройки. Здесь представлены основные настройки, которые может менять пользователь. Их тут много и без сторонних плагинов.

Настройка основных параметров

Visual Studio Code позволяет выполнить настройку параметров как для всей программы в целом, так и задать их индивидуально для какого-то проекта. Для получения доступа к параметрам кликните по иконке шестеренки и выберите в контекстном меню “Settings”.

Переход в параметры VS Code

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

Автосохранение

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

Настройка автосохранения производится следующим образом:

1. При переходе в параметры VS Code должна автоматически открыться нужная вкладка, но если вы ее случайно сбили, то переключайтесь в “Commonly Used”.

2. В блоке “Files: Auto Save” по умолчанию стоит значение “Off”. Его нужно изменить на:

• afterDelay. Файл сохраняется раз в промежуток времени, настроенный пользователем;
• onfocusChange. Сохранение файла производится, когда вы переходите в другой файл проекта;
• onWindowChange. Сохранение производится при переключении на другое окно.

Автосохранение в VS Code

3. Выберите для себя удобный вариант автосохранения.

Настройка отображения кода

Для удобного редактирования кода настройте его отображение: размер и семейство шрифта, отступы, табуляцию. Рассмотрим настройку этих параметров:

1. Font Size. Здесь по умолчанию стоит 14 размер, но его можно изменить на любой произвольный.

2. Font Family. В это поле вручную прописывается название шрифта по умолчанию и его тип.

3. Tab Size. Настраивается шаг табуляции в пробелах. По умолчанию стоит значение 4. Его можно заменить на любое произвольное.

4. Render Whitespace. Управляет отрисовкой пробелов в редакторе. Доступно 5 вариантов:

• none — нет никакой дополнительной отрисовки;
• boundary — отрисовываются все пробелы, кроме одиночных между слов;
• selection — пробелы отрисовываются только в выделенном тексте (этот параметр выбран по умолчанию);
• trailing — отрисовываются конечные пробелы;
• all — отрисовываются все пробелы.

5. Cursor Style. Здесь можно выбрать стиль курсора. Всего доступно 6 стилей.

6. Insert Space. Отвечает за действие редактора при нажатии на клавишу Tab. По умолчанию здесь будут вставляться пробелы. Если снять галочку, то редактор будет вставлять знаки табуляции.

7. Word Wrap. Отвечает за автоматический перенос строк. По умолчанию он отключен, но можно сделать авто перенос по размеру окна и по пользовательским настройкам.

Настройки отображения в VS Code

Настройка подсказок

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

Однако помимо подсказок в таком случае пропадают и некоторые функции, которые могут быть полезны для работы со стилями. Например, подсветка цветов, написанных в виде RGB, HEX, RGBA. Помимо отображения самого цвета появится всплывающее окошко с палитрой, где можно быстро выбрать другой цвет и уровень прозрачности (при переключении на RGBA).

Если вам не нужно, чтобы в CSS не появлялись цветовые обозначения HEX/RGBA-палитры, то снимите галочку с параметра “Color Decorators”. В таком случае не будет вообще никаких подсказок, касательно цвета.

“Close Active Groups” — еще один параметр, на который рекомендуется обратить внимание. Отвечает за то, будет ли закрываться группа при закрытии последней вкладки в ней. Иногда автоматическое закрытие групп не очень удобно в работе, поэтому галочку с этого параметра можно снять.

Подсказки цветов в VS Code

Начинающим верстальщикам рекомендуется не отключать подсказки. Исключением могут быть параметры “Hover Enabled” и “Close Active Groups”, так как они действительно иногда могут мешать.

Настройка форматирования

В Visual Studio Code есть несколько параметров, отвечающих за форматирование кода. С помощью него можно, например, быстро исправить съехавшую табуляцию в документе. По умолчанию для этого используется сочетание клавиш Shift+Alt+F. Также есть возможность выбрать параметры для автоматического форматирования кода в файлах:

• Format On Paste — автоматическое форматирование при вставке кода, например, из буфера обмена;
• Format On Save — автоматическое форматирование в момент сохранения файла;
• Format On Type — форматирование производится автоматически в процессе печати.

Настройки форматирования в VS Code

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

Настройка области написания кода

Ее настройку стоит рассмотреть отдельно. Здесь можно настроить несколько рабочих областей, разделив область написания кода на несколько частей. Это удобно в тех случаях, когда часто приходится взаимодействовать одновременно с несколькими файлами. Например, это актуально при верстке, когда разработчик пишет HTML-каркас и одновременно CSS-стили для него и JS-скрипты в отдельных файлах. Разделение на несколько рабочих областей можно сделать через меню “Вид”. Там выберите пункт “Макет редактора” и наиболее удобную для вас сетку.

Дополнительно в меню “Вид” доступна настройка масштабирования. Можно быстро увеличить или уменьшить шрифт в данном документе или проекте. Нужные настройки находятся в пункте “Внешний вид”. Там также можно вообще сбросить все настройки для всего документа. Также здесь можно скрывать или показывать разные элементы.

Режимы экрана

Предусмотрено несколько режимов работы с кодом:

1. Полноэкранный режим. Включается при нажатии клавиши F11. Скрывает верхнее меню и кнопки управления программой, а также панель задач Windows. Отключить этот режим можно повторным нажатием по клавише F11.

Полноэкранный режим в VS Code

2. Режим Zen. Почти тоже самое, что и полноэкранный режим, но он скрывает все элементы управления VS Code, позволяя сфокусироваться только на коде. Включить этот режим можно через меню “Вид”, выбрав раздел “Внешний вид” и затем “Режим Zen”.

Режим Zen в VS Code

Перенос текста

Иногда при вставке большого куска текста (просто текста, не кода) он может вставиться в виде длинной строки. Тогда появляется горизонтальная прокрутка, что не очень удобно. Этого можно избежать, воспользовавшись сочетанием клавиш Alt+Z. Текст после этого перестроится так, чтобы нормально помещаться в область работы с кодом без необходимости дополнительной прокрутки снизу.

Важные плагины VS Code для верстальщика

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

Emmet

Данное расширение позволяет сокращать написание кода, использовать формулы для автоматического раскрытия больших структур кода. Например, поставив просто символ “!” в начале HTML-документа можно сразу же раскрыть его готовую начальную структуру со всеми необходимыми тегами. Также можно работать с элементами, например, если нужен div с классом block, то достаточно просто прописать .block и нужный div будет создан.

А вот пример использования формул. Предположим, вам требуется создать маркированный список на 10 элементов. Просто пропишите ul>li*10 и нажмите Tab. Список готов!

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

Live Sass Compiler

Плагин отвечает за автоматическую компиляцию SASS/SCSS в обычный CSS. Рекомендуется к установке тем, кто работает с этими препроцессорами. Также компилятор позволяет импортировать содержимое других SASS/SCSS-файлов в основной. О корректной работе данного плагина будет говорить надпись Watch Sass в нижней части окна программы. При нажатии на нее открываются настройки плагина.

Плагин LiveSASS в VS Code

Live Server

Полезный плагин, который создает локальный сервер и позволяет отслеживать изменения в HTML-документе в режиме реального времени. Без него вам потребовалось бы сначала сохранить документ, а потом обновить страницу с ним в браузере. За работу плагина отвечает кнопка Go Live в нижней строке программы. При нажатии на нее документ, с которым вы работаете автоматически открывается в браузере, который установлен в системе в качестве браузера по умолчанию.

Плагин Live Server в VS Code

SCSS IntelliSense

Плагин показывает дополнительные подсказки при работе с синтаксисом SASS и SCSS. Позволяет автоматизировать некоторые моменты прописывания стилей и указывает на ошибки в синтаксисе, предлагает исправления.

SCSS Formatter

Чем-то похож на предыдущий плагин, но в отличии от него имеет более скромный функционал. Отвечает за корректное форматирование SCSS/SASS.

Better Comments

По умолчанию комментарии в Visual Studio Code отмечены серым цветом и выглядят на фоне основного кода невзрачно. Данный плагин позволяет сделать акцент на комментариях, где это действительно необходимо, например, выделить их контрастным цветом. Цвета выделений можно настроить под себя или использовать стандартный набор. Это очень полезно в случае с командной работой.

Плагин Better Comments в VS Code

BEM Helper

Создан для упрощения работы с BEM. Умеет вставлять сразу новый элемент по методологии bem, учитывая родителя, учитывая блок. Также может вставлять модификаторы, формировать файлы стилей. Будет полезен не только верстальщикам, но и обычным программистам.

Плагин BEM Helper в VS Code

eCSStractor

Этот плагин упрощает перенос классов из HTML в файлы со стилями: CSS, SCSS, SASS. После добавления плагина в программу нужно будет настроить для него сочетание клавиш. Перейдите в его настройки на странице добавления и выберите пункт “Сочетание клавиш”. Задайте любую удобную комбинацию клавиш.

Плагин работает таким образом:

1. Выделите нужный отрезок HTML-кода, из которого требуется скопировать классы.

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

Плагин eCSStractor в VS Code

CSS Navigation

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

Плагин CSS Navigation в VS Code

Image Preview

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

Плагин Image Preview в VS Code

Заключение

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

Источник