Форматирование кода в Visual Studio Code с помощью ESLint
Если вы пишете JavaScript в редакторе, например в Visual Studio Code, у вас есть несколько способов убедиться, что ваш код имеет правильный синтаксис и соответствует передовым практикам. Для этого можно использовать линтер. Линтеры – это программы, которые проверяют ваш код на наличие синтаксических ошибок и выделяют их, чтобы вы могли быстро их найти и исправить. ESLint – это линтер, который вы можете интегрировать в Visual Studio Code, чтобы обеспечить целостность вашего кода.
ESLint может форматировать код и анализировать его, а также вносить предложения по улучшению. Кроме того, вы можете настроить способ оценки вашего кода.
В этом руководстве вы узнаете, как установить ESLint на Visual Studio Code и реализовать пользовательскую конфигурацию для работы с операторами логов при отладке. Также мы покажем, как настроить автоматическое исправление синтаксических ошибок в ESLint при сохранении файлов.
Требования
- Последняя версия Visual Studio Code на вашем компьютере. В этом руководстве используется Visual Studio Code 1.43.0.
- Последняя версия Node на вашем компьютере. Вы можете следовать инструкциям по установке Node.js в macOS, Debian 10, CentOS 8, Ubuntu 20.04.
1: Создание простого кода JavaScript
Мы начнем с подготовки тестового проекта, на примере которого рассмотрим функции линтера. Создайте для своего проекта каталог с помощью следующей команды:
Теперь, когда папка для проекта готова, перейдите в нее:
Находясь внутри каталога linting, создайте файл JavaScript по имени app.js:
Откройте app.js в Visual Studio Code. Поместите следующий код JavaScript в файл app.js:
const name = ‘James’
const sayHelloLinting = (fName) =>
С точки зрения форматирования вы можете сразу заметить несколько вещей, которые можно улучшить:
- Кавычки использованы непоследовательно.
- Точка с запятой – тоже.
- Интервалы установлены неправильно.
Подготовив этот файл JavaScript, вы можете инициализировать этот проект. Для этого вернитесь в командную строку и в каталоге linting выполните следующую команду:
Команда npm init при инициализации вашего проекта создаст в каталоге linting файл package.json. В package.json будут храниться зависимости и другие важные параметры конфигурации вашего проекта.
Теперь, когда тестовый проект JavaScript готов, мы можем установить ESLint.
2: Установка и настройка ESLint
Чтобы установить ESLint, введите:
npm install eslint —save-dev
В эту команду важно включить флаг –save-dev, поскольку он сохраняет пакет как зависимость разработки – и тогда он будет использован только в разработке, но не в производстве. Пакет eslint нужен только тогда, когда вы активно работаете над кодом и вносите изменения в свой проект. Как только ваш проект будет на стадии производства, eslint больше не понадобится. И флаг –save-dev гарантирует, что eslint будет указан в вашем файле package.json только как зависимость разработки.
Теперь, когда ESLint установлен, вы можете инициализировать конфигурацию ESLint для своего проекта, используя для этого следующую команду:
Важным элементом этой команды является флаг –init. Раздел ./node_modules/.bin/eslint этой команды – это путь к ESLint в вашем проекте. Флаг –init активирует ESLint для вашего проекта. Процедура активации или инициализации ESLint создаст конфигурационный файл, который позволит вам настроить ESLint для вашего проекта.
Прежде чем вы сможете получить доступ к своему конфигурационному файлу ESLint, программа задаст вам несколько вопросов о проекте. Эти вопросы помогут программе убедиться, что конфигурация, инициализированная для вашего проекта, наилучшим образом соответствует требованиям.
Первый вопрос будет выглядеть так:
? How would you like to use ESLint? …
To check syntax only
To check syntax and find problems
❯ To check syntax, find problems, and enforce code style
Здесь мы выберем To check syntax, find problems, and enforce code style – чтобы программа проверяла синтаксис, сообщала о проблемах и поддерживала единый стиль кода.
Следующий вопрос выглядит так:
What type of modules does your project use? …
JavaScript modules (import/export)
Выберите опцию CommonJS, чтобы использовать глобальные переменные CommonJS.
В следующем вопросе будет сказано:
? Which framework does your project use? …
Выберите вариант None of these.
Затем программа спросит:
? Does your project use TypeScript? › No / Yes
Выберите вариант No.
Затем появится такой вопрос:
Затем вы увидите такой вопрос:
✔ How would you like to define a style for your project? …
❯ Use a popular style guide
Answer questions about your style
Inspect your JavaScript file(s)
Выберите ответ Use a popular style guide.
Which style guide do you want to follow?
Ответьте Airbnb: https://github.com/airbnb/javascript.
Затем будет такой вопрос:
? What format do you want your config file to be in? …
Нужно выбрать JSON.
Вы получите такое сообщение:
Checking peerDependencies of eslint-config-airbnb-base@latest
The config that you’ve selected requires the following dependencies:
eslint-config-airbnb-base@latest eslint@^5.16.0 || ^6.8.0 || ^7.2.0 eslint-plugin-import@^2.21.2
Последний вопрос программы выглядит так:
? Would you like to install them now with npm? › No / Yes
Выберите вариант Yes, чтобы установить зависимости с помощью npm.
Вам также будет предложено установить дополнительные пакеты. Выберите yes.
После всех вопросов вы заметите, что в ваш каталог linting был добавлен файл .eslintrc.json. Теперь инструмент ESLint установлен. Код в app.js пока не изменился – и это связано с тем, что ESLint необходимо интегрировать с Visual Studio Code.
3: Настройка ESLint
Чтобы интегрировать ESLint в Visual Studio Code, вам необходимо установить расширение ESLint для VS Code. Вернитесь в Visual Studio Code и найдите ESLint во вкладке Extensions. После того, как вы найдете это расширение, нажмите Install.
После установки расширения ESLint вы заметите красочное подчеркивание в файле app.js – это линтер выделил ошибки в файле. Отметки в ESLint имеют разные цвета в зависимости от степени серьезности. Если вы наведете курсор на подчеркнутый код, вы увидите сообщение, объясняющее вам ошибку. Таким образом, ESLint помогает находить ошибки в коде и устранять их.
ESLint может сделать для вас даже больше: к примеру, он может автоматически исправлять ошибки при каждом сохранении файла (для этого требуется отдельная настройка).
4: Форматирование при сохранении
Чтобы ESLint мог автоматически исправлять синтаксис и устранять ошибки форматирования при каждом сохранении, вам нужно открыть меню настроек. Меню в Visual Studio Code – это значок шестеренки в левом нижнем углу. Нажмите его и выберите Settings.
В меню настроек найдите Code Actions on Save. Первой идет опция Editor: Code Actions on Save, а ниже – Edit in settings.json, и как раз она нам нужна.
Файл settings.json откроется в редакторе кода. Чтобы ESLint исправлял ошибки при сохранении файла, вам нужно добавить следующий код в settings.json:
С помощью этого кода ESLint сможет автоматически исправляет ошибки и проверяет JavaScript при сохранении.
Вернитесь к файлу app.js и сохраните его. Вы увидите, что линтер внес некоторые изменения, и цвет подчеркивания тоже изменился. Вот некоторые из ошибок форматирования, которые исправил ESLint:
- Теперь одинарные кавычки использованы последовательно.
- Точки с запятой – тоже.
- Отступ внутри функции расставлены правильно.
ESLint автоматически будет устранять синтаксические ошибки при сохранении файла app.js. Но пока у нас еще остались сообщения об ошибках. Их можно исправить, настроив ESLint для обнаружения или игнорирования определенных ошибок и проблем с форматированием.
5: Пользовательская настройка ESLint
«Из коробки» ESLint подчеркивает все операторы console.log() в app.js. В некоторых случаях распознавание операторов console.log в качестве ошибки может быть не в приоритете. Вы можете игнорировать операторы console.log.
Правила конфигурации ESLint можно изменить в файле .eslintrc.json.
Откройте файл .eslintrc.json. В этом файле вы увидите такой код:
В конце файла .eslintrc.json вы увидите объект «rules». Чтобы настроить триггеры ESLint (или отключить реакцию ESLint на определенные фрагменты кода), нужно добавить пары «ключ-значение» к объекту «rules». Ключ – это название правила, которое нужно добавить или изменить. Значение задает уровень серьезности проблемы. ESLint поддерживает три уровня серьезности:
- error – подчеркивается красным
- warn – подчеркивается желтое
- off – ничего неподчеркивается.
Если вы не хотите подчеркивать операторы console.log как ошибки, вы можете назвать правило no-console и указать это имя в качестве ключа. Используйте off как значение:
Это правило удаляет подчеркивание операторов console.log в app.js.
Некоторые правила требуют нескольких фрагментов данных, включая уровень серьезности и значение. К примеру, чтобы указать тип кавычек, которые вы хотите использовать в своем коде, вы должны передать и выбранный тип кавычек, и уровень серьезности:
Если теперь вы включите в код одинарные кавычки, ESLint выдаст ошибку.
Заключение
Это руководство вкратце знакомит с некоторыми функциями интеграции ESLint в Visual Studio Code. Инструменты линтинга, такие как ESLint, помогут вам сэкономить время для более сложных задач за счет автоматизации и упрощения проверки синтаксиса и остальных требований к коду.
Если вам нужна дополнительная информация о правилах и о том, какие пары «ключ-значение» вы можете использовать для настройки ESLint, вы можете ознакомиться с документацией.
Создание своей темы для Visual Studio Code
Visual Studio Code — новый редактор для разработчиков от компании Microsoft.
Конечно, на данный момент он уступает по количеству поддерживаемых функций широко распространённому Sublime Text, но при этом быстро «набирает обороты». Подтверждением тому является уже достаточно большой набор расширений в Visual Studio Marketplace.
В принципе, тем кто до этого пробовал редактор Sublime Text будет несложно найти много общего между этими продуктами как в визуальном оформлении, так и в наборе базовых возможностей.
К сожалению, VS Code пока что не поддерживает тем оформления интерфейса. Но есть много классных тем подсветки синтаксиса. Ниже некоторые из них.
Кроме готовых тем, можно создавать и свои, полностью отвечающие Вашим требованиям.
Возможно я буду неоригинален, но хочу поделиться информацией об онлайн-редакторе, который позволяет создавать темы, поддерживаемые в VS Code.
В редакторе можно поменять всё что угодно (шрифт, цвет, подсветку ключевых слов и т.п.). Есть готовые темы. Также можно создать свою на основе базовой, предлагаемой по умолчанию. После того, как новая тема готова, вам достаточно её сохранить на компьютер.
Установка своей темы в VS Code
1. Переходим в каталог %USER_PROFILE%\.vscode\extensions;
2. Создаём новый каталог с названием нашей темы;
3. Создаём в каталоге нашей темы файл package.json со следующим содержимым:
< "name": "theme-name", //Имя темы "version": "0.0.1", "engines": < "vscode": ">=0.9.0-pre.1" >, "publisher": "Your Name", //имя автора темы "contributes": < "themes": [ < "label": "Theme label", "uiTheme": "vs-dark", // use "vs" to select the light UI theme "path": "./themes/YourTheme_Theme.tmTheme" //указываем путь к нашему файлу темы >] > > 4. Создаём каталог themes и кладём в него нашу новую тему.
Готово. Теперь в меню «File»-«Preferences»-«Color Theme» Вы можете выбрать и применить свою тему.
One Dark Pro
One Dark Pro — популярная цветовая тема для VS Code, которая существует уже несколько лет. Это темная тема с синим оттенком, которая придает редактору профессиональный вид. One Dark Pro — отличный выбор для тех, кто предпочитает более темный интерфейс, но не хочет, чтобы что-то слишком резало глаза. Тема приятна для глаз, а подсветка синтаксиса очень четкая, что облегчает чтение кода.
Github
Github — это еще одна популярная цветовая тема для VS Code, вдохновленная веб-сайтом Github. Тема имеет светлый фон с темным текстом, что делает ее отличным выбором для тех, кто предпочитает более светлый интерфейс. Подсветка синтаксиса выполнена очень хорошо, а цвета приятны для глаз, что делает его отличным выбором для длительной работы.
Material Theme
Material Theme — это красивая и красочная тема для VS Code, основанная на рекомендациях Google по дизайну компонентов. Тема использует яркие цвета и чистую типографику для создания современного и изящного интерфейса. Подсветка синтаксиса очень четкая, а цвета приятны для глаз, что делает его отличным выбором для долгой работы.
Nord
Nord — это красивая и минималистичная цветовая тема для VS Code, использующая холодную цветовую палитру.
Tokyo Night
Tokyo Night — это уникальная и красивая тема для VS Code, вдохновленная городом Токио. Тема использует темный фон с мягкими синими и фиолетовыми акцентами для создания красивого и успокаивающего интерфейса.
Dracula
Dracula — популярная и культовая тема для VS Code, вдохновленная одноименным классическим персонажем хоррора. Тема использует темный фон с яркими розовыми и фиолетовыми акцентами для создания смелого и эффектного интерфейса.
Cobalt2
Cobalt2 — популярная тема для VS Code, которая имеет темный фон и использует синие и желтые акцентные цвета. Она имеет отличную подсветку синтаксиса, а цвета яркие и легко читаемые. Тема — отличный выбор для тех, кто хочет смелый и привлекательный интерфейс.
Ayu — это уникальная цветовая тема для VS Code, в которой используется сочетание ярких и приглушенных цветов. Тема имеет светлый фон с отличной подсветкой синтаксиса и является отличным выбором для тех, кто хочет красочный и современный интерфейс. Ayu доступен в трех различных версиях: Light, Mirage и Dark, так что вы можете выбрать ту, которая наилучшим образом соответствует вашим предпочтениям.
Gruvbox
Gruvbox — популярная цветовая тема для VS Code, в которой используются теплые, землистые цвета. Тема имеет темный фон с отличной подсветкой синтаксиса, а цвета приятны для глаз. Это отличный выбор для тех, кто хочет уютный интерфейс.
Как установить тему в VS Code
Установка цветовой темы в VS Code — это простой процесс. Вот основные шаги:
- В VS Code нажмите на значок Extensions в левой части окна.
- В строке поиска введите название темы, которую вы хотите установить.
- Нажмите на кнопку Install, чтобы установить тему.
- После установки перейдите File -> Preferences -> Theme -> Color Theme.
- В появившемся выпадающем меню выберите тему, которую вы хотите использовать.
- Цветовая тема будет немедленно применена к вашему редактору.
В выпадающем меню темы распределены по группам: светлые, темные и контрастные
Какую тему выбрать: светлую или темную?
Выбор цветовой темы, будь то темная или светлая, зависит от личных предпочтений. Некоторые люди предпочитают темные темы, потому что они снижают нагрузку на глаза и легче воспринимаются в условиях низкой освещенности. Другие предпочитают светлые темы, потому что они предлагают более яркое рабочее пространство.
Вот некоторые плюсы и минусы как темных, так и светлых тем, которые помогут вам принять решение:
Темные темы
- Плюсы: Темные темы снижают нагрузку на глаза, и на них легче читать при слабом освещении. Они также, как правило, выделяют яркие цвета подсветки синтаксиса, облегчая чтение кода.
- Минусы: Темные темы могут быть слишком тусклыми при ярком освещении, а высокий контраст между темным фоном и ярким текстом в некоторых случаях может быть неприятен для глаз.
Светлые темы
- Плюсы: Светлые темы создают более яркое рабочее пространство, на котором легче читать при ярком освещении. Они также, как правило, более нейтральны по цвету, что может быть полезно, если вы работаете с различными языками и цветами подсветки синтаксиса.
- Минусы: Светлые темы могут быть слишком яркими в условиях низкой освещенности и со временем могут привести к перенапряжению глаз.
В конечном счете, выбор между темной или светлой темой зависит от ваших личных предпочтений и рабочей среды. Возможно, вы захотите попробовать оба типа тем, чтобы посмотреть, какая из них вам больше подходит. Некоторые даже переключаются между темными и светлыми темами в зависимости от времени суток или своего настроения. Самое главное — выбрать тему, которая позволит вам чувствовать себя комфортно и продуктивно во время работы.
Заключение
Каждая из рассмотренных темы — это отличные варианты, предлагающие уникальные и красивые интерфейсы. Независимо от того, что вы выберите, самое главное — найти тему, которая будет приятна для глаз и сделает программирование приятным и продуктивным занятием.
Как изменить цвет указанного синтаксиса в VSCode, не затрагивая остальной синтаксис, окрашенный темой?
Мне очень нравится V.S. Тема кода, Abyss . Иногда я обнаруживаю, что тема затрудняет чтение моего кода, поэтому текст, отображаемый в редакторе, будет выглядеть так, как будто он сливается с фоном; Я думал, что изменение индивидуального цвета синтаксиса будет хорошим решением.
Я хочу иметь возможность настроить пару цветовых маркеров, оставив остальной синтаксис без изменений. Как я могу выбирать и изменять свойства цветовых маркеров, не влияя на другие части темы, которые в настоящее время установлены в редакторе?
Я хочу использовать цвет синтаксиса кода темы GitHub dark default с темой Abyss в остальной части пользовательского интерфейса.
Я нашел сайт (нажмите, чтобы увидеть), который предлагает изменить цвета синтаксиса с помощью свойства editor.tokenColorCustomizations .
Я не могу понять, как мне скопировать цветовую конфигурацию из GiHub dark default в тему Abyss .
Darkstar Dream 29 Июн 2021 в 21:08
1 ответ
Лучший ответ
ПРОТИВ. Пользователи кода имеют возможность стилизовать синтаксис, отображаемый в редакторе, а также возможность стилизовать сам редактор — это включает в себя инструментальные средства и все элементы в рабочих местах. Чтобы приступить к стилизации рабочей среды или синтаксиса в редакторе, необходимо сначала добавить следующие свойства JSON либо в файл settings.json в области пользователя, либо в файл settings.json в области рабочей области.
- «workbench.colorCustomizations»: < /* properties here */ >
- «editor.tokenColorCustomizations»:[ /* properties here */ ]
Пример правильно настроенного файла settings.json :
// "./.vscode/settings.json" < "workbench.colorCustomizations": < "editor.background": "#08182F", "sideBar.background": "#00132D", "panel.background": "#00132D", "activityBar.background": "#002040", "editorGroupHeader.tabsBackground": "#00132D", "tab.inactiveBackground": "#00132D", "tab.activeBackground": "#003054", "tab.activeBorder": "#003054", "breadcrumb.background": "#003054", "statusBar.background": "#005280", "sideBar.border": "#103050", "titleBar.border": "#103050", "statusBar.border": "#103050", "menu.border": "#103050", "contrastBorder": "#103050", "panel.border": "#103050", "editorRuler.foreground": "#103050", "tab.border": "#103050", "tab.lastPinnedBorder": "#103050", "activityBar.border": "#103050", >, "editor.tokenColorCustomizations": [ < "scope": "punctuation", "settings": < "foreground": "#C4C4C4", "fontStyle": "" >>, < "scope": "comment", "settings": < "foreground": "#246488", "fontStyle": "" >>, < "scope": "string", "settings": < "foreground": "#98DAF4", "fontStyle": "" >>, ] > Существует множество других свойств, которые можно использовать для стилизации вашего редактора и синтаксиса. Хорошим источником для ссылки является этот шаблон, созданный генератором YO CODE, и некоторые дизайнеры тем используют его в качестве отправной точки при создании новой темы.
Шаблон темы (например, вам не нужно создавать тему, чтобы использовать свойства).
Самый полезный инструмент в вашем распоряжении при написании свойств темы — как и в примере выше — это виджет предложений VSCodes. Виджет предложений чаще всего используется для автоматического завершения кода, однако его полезность выходит далеко за рамки завершения строки текста за вас. Если вы введете «background», находясь внутри одного из свойств colors или tokenColors , для выбора будет доступен весь список доступных свойств фона. from, и вы не ограничены только свойствами фона, виджет предложений будет работать для поиска границ, переднего плана, значков, кнопок, полей ввода, полос, выделений и многого другого.
РЕДАКТИРОВАТЬ: Если вы загружаете тему GitHub, вы можете найти файл JSON темы, который является исходным кодом для «темной темы GitHub» в следующем месте:
Когда у вас есть исходный документ JSON темы, вы можете скопировать и вставить отдельные свойства из темы, которую вы нашли, в файл ./.vscode/settings.json , используя свойства:
- «workbench.colorCustomizations»: < /* properties here */ >
- «editor.tokenColorCustomizations»:[ /* properties here */ ]
ПРИМЕЧАНИЕ. Требуется некоторая практика и некоторое чтение, чтобы научиться создавать темы или даже просто настраивать текущую тему так, как вы это делаете сейчас.
ДОПОЛНИТЕЛЬНАЯ ПОМОЩЬ
Я думаю, это может помочь, если я объясню, что вы делаете.
Файл рабочей области settings.json , расположенный в корне каждого проекта.
«./.vscode/settings.json»
. имеет приоритет над всеми другими файлами конфигурации, поэтому, когда параметр или свойство настраиваются в двух файлах, и один из файлов «./.vscode/settings.json» , тогда конфигурация, установленная внутри «./.vscode/settings.json» , будет иметь преимущество. из конфигурации в другом файле, потому что «./.vscode/settings.json» переопределяет любые содержащиеся в нем конфигурации, которые также хранятся где-то еще. (Надеюсь это имеет смысл).
Рядом с файлом рабочей области «settings.json» находится файл пользователей settings.json , который находится по адресу:
«$HOME/.config/Code/User/settings.json»
Таким образом, в основном все, что вам нужно знать на данный момент, это то, что ваши файлы settings.json являются общеизвестными, все остальное переопределяется. Это очень важно, потому что когда вы используете файлы settings.json для установки свойств маркера цвета, чтобы выделить некоторый синтаксис, который окрашивается темой, и вы перекрашиваете его, потому что он вам не нравится, то, что вы делаете , переопределяет файл JSON темы, расположенный в каталоге расширения тем @ $HOME/.vscode/extensions . Если вы не установите свойство в допустимом файле settings.json , свойство останется неизменным. Это позволяет вам выбирать и выбирать, какие свойства изменить, переопределяя свойства, которые вам не нравятся. И, как я уже говорил в комментариях и выше, это свойства, которые вы будете использовать для предварительной настройки переопределений.
Вместо того, чтобы пытаться копировать и вставлять целые темы, просто попробуйте изменить один элемент. Как только вам удастся изменить один элемент, вы можете попробовать одновременно изменить несколько.
Dada 22 Ноя 2021 в 11:30
Я просто хочу изменить цвета подсветки синтаксиса кода. Я не знаю, какой цвет для чего используется, и индивидуальная настройка может быть сложной. Итак, я проверил исходный файл JSON темы Github. Тема. Я полагаю, что в строке 226 они упомянули код свойства цвета. Так есть ли способ скопировать это и вставить в мой файл settings.json. На самом деле у меня мало знаний о синтаксисе JSON, так что не могли бы вы мне помочь?
Darkstar Dream
30 Июн 2021 в 03:21
Точно так же, как вы используете «workbench.colorCustomizations» и «editor.tokenColorCustomizations», вы создаете тему. Поэтому на них часто ссылаются, но любое из свойств токена, которое вы можете выделить в теме, вы можете выделить в свойствах settings.json, которые я только что упомянул.
30 Июн 2021 в 03:27
Если вы не возражаете, не могли бы вы взглянуть на мой текущий файл setting.json и можете ли вы сказать мне, как я могу добавить этот код в свой файл настроек
Darkstar Dream
30 Июн 2021 в 03:34
Да, я собираюсь добавить это в ответ, потому что уценка в этих комментариях не поддерживается. Дай мне минутку
30 Июн 2021 в 03:35
Хорошо, это все, что вы получаете на данный момент. Попробуйте изменить материал, если вы не можете, может быть, я смогу помочь позже.