Vs code prettier настройка

03.09.202203.09.2022 admin 0 Comments

Vs code prettier настройка

Better world by better software

Gleb Bahmutov PhD

Our planet 🌏 is in danger

Act today: what you can do

How to configure Prettier and VSCode

How to set up Prettier, ESLint and VSCode per project and have your JavaScript auto-formatted without pulling your hair.

You can configure JavaScript code auto-formatting with Prettier to work per-project. This allows you to get a consistent formatting without thinking or arguing about it. This blog post shows how to configure Prettier to work from command line, from VSCode and from Git hooks.

You can find the sample project with different Prettier settings configured per-subfolder at bahmutov/prettier-config-example.

Why Prettier?

Prettier reformats your JavaScript code consistently and (arguably) in way that is easy to read and understand. It takes whatever copy/pasted code snippets you put into your file and makes it look the same as the rest of the code. By using Prettier your team skips ALL disagreements about spacing, variable declarations, semi-colons, trailing commas, etc. The code just magically gets to the format you pick.

You can use Prettier from command line, or from your code editor whenever you paste or save a file. I prefer to use two solutions described in this blog post:

Let me show you how to do both.

Setup

When setting up Prettier it is important to configure it per-project. Not every project uses the same code style, thus it is important to respect the style of whatever project you are currently working in. The demo repo bahmutov/prettier-config-example has two subfolders, each with its distinct code style, enforced by Prettier. In reality, each of your repos will have its style; I am using subfolders in order to keep the example simple.

I assume you are using NPM and have package.json file inside the repository. Install Prettier

At the root of the project create the Prettier configuration file. In my example I have two subfolders, and there is a configuration file in each subfolder:

I like using JSON configuration format so my code editor helps me. In fact, VSCode understands the Prettier configuration file format via the built-in json schema. So when I edit projectA/.prettierrc.json file, I get intelligent tooltips.

Settings

Prettier tries to enforce the same code style without 100s of options, thus there are just a few settings you can change. Here are settings I am using in the first project to make it look «traditional» ES5

The second project uses more modern style without semi-colons and with trailing commas.

VSCode setup

To use the Prettier we have just installed from VSCode we need to install the Prettier VSCode extension:

Now every time we save a JavaScript file, it will be formatted using Prettier automatically. Here is me formatting projectA/index.js file by saving it.

The same JavaScript code in projectB/index.js gets formatted by Prettier using different local settings and ends up looking different.

Single quotes, no semi-colons, trailing commas.

Format files from CLI

Formatting every file as you save it is nice, but we can also format ALL source files at once using Prettier CLI. In the package.json add a script to format files matching the mask and to write them back to disk.

Run this NPM script and the files will be formatted to follow the Prettier style.

Format staged files on commit

Whenever we work with files locally, we might accidentally commit them without proper styling. That’s where Git hooks and formatting staged files comes in handy. To consistently format all files before committing and then commit changes, I recommend using husky + lint-staged combination of tools.

Now configure pre-commit hook to run Prettier against staged JavaScript files. In the package.json set the following

If you try to commit changed JavaScript files, they will automatically be formatted and re-staged, ensuring only pretty JavaScript code is committed. In the Git commit shortcut output below, the «Running tasks. » messages comes from the lint-staged tool.

Update when using [email protected] and [email protected] the transformed files are added to the commit automatically. For example to format JavaScript and Markdown files on commit:

Catch mis-formatted files on CI

Using stop-build

You can really enforce the formatting before pushing code to the central repository by running Prettier on CI and then detecting any changed files. Just run stop-build after running Prettier.

If any of the source files were reformatted by Prettier, the stop-only will detect changed source files using Git information and will exit with an error. It will list the changed files, something like this:

Using Prettier

Then on CI we can call the script right after npm install

Let’s say one of the files has not been formatted.

Common problems

Nothing happens on save

If everything else fails, quit VSCode and start it again.

Code formatting is wrong

Here is a little animation that shows a file being saved with Prettier setting «trailingComma: true», yet the comma gets deleted somehow.

Check if there are OTHER code formatting extensions installed and disable them for this workspace. For some reason, VSCode can use globally installed extension overwriting local setting. Don’t ask. In my case, I had «Prettier-Standard» extension enabled globally. After disabling the «Prettier-Standard» for the current workspace, Prettier extension started working as expected.

Print width

Typically I use the default print width of 80 characters. But when I do my screen casts, I need both the code and the application side by side. Thus for those examples, I set the print width to 60.

Looks very nice!

Ignoring files

Saving without formatting

Temporarily disable formatting

There is also an extension that temporarily disables format on save feature called Formatting Toggle. Install it in your VSCode and whenever you want to temporarily disable Prettier on save, click on the «Formatting» toggle in the status bar.

Only format configured projects

In the VSCode global settings, set this option to only allow running Prettier in the folders with Prettier config file.

I definitely recommend setting this global option to avoid accidentally changing how the code looks in the projects that do not want to use your or any Prettier settings.

Ignore parts of files

I love using range ignore to disable formatting parts of file. For example, to stop Prettier from reformatting Markdown tables use:

In code, you can tell Prettier to ignore the next AST node by adding // prettier-ignore comment. For example, in the next test we want to show the array input as a Tic-Tac-Toe board

Use Eslint with Prettier

Prettier reformats JavaScript code to follow certain style, it does not check the meaning of the code. For example, Prettier happily reformats the following wrong code.

Static linters, like ESLint can catch the assignment to a constant variable, so we need both:

Disable style rules in ESLint

ESLint runs a long list of rules against the code, and some of these rules are stylistic, and can conflict with Prettier’s style. Thus we need to configure ESLint to skip those rules. This configuration is in module eslint-config-prettier. Install it

Now when you run ESLint against this file

Then ESLint will catch the const assignment error; it will also catch that the variable name is never used after assignment.

ESLint and React

If you want to check React code that uses JSX, import / export keywords, then install a plugin eslint-plugin-react

Integrate ESLint in VSCode

Since we are using VSCode, it makes sense to install ESLint VSCode extension called dbaeumer.vscode-eslint

Open Command Pallette with Command + P

Enable this extension in VSCode workspace settings

JavaScript files should now show ESLint errors right inside VSCode editor.

You can see these errors for yourself by opening projectC/index.js in VSCode from the example repo.

Run Prettier from ESLint

Since ESLint can detect and fix many of the errors it detects automatically, let’s tell ESLint to run Prettier too. Here is the recommended setup

Install ESLint Prettier config and plugin

Point ESLint at the recommended settings which include Prettier styles

Notice in the screenshot below how ESLint warnings in VSCode editor include style errors from Prettier.

VSCode + ESLint + Prettier setup

plugin v1 version (old)

plugin v2 version (current)

The animation shows how saving the file fixes both style and lint problems.

VSCode + ESLint + Prettier + TypeScript setup

ESLint can lint TypeScript files through typescript-eslint, and Prettier can format TypeScript code. Let’s set it up.

Second, install a new parser and plugin modules

Then set the VSCode workspace settings to lint TypeScript files

Set the ESLint options. Parsing files will be done using @typescript-eslint/parser, and we need @typescript-eslint plugin.

And now you should see ESLint + Prettier errors and warnings in VSCode

Note: there is a bug in VSCode + ESLint extension where Prettier is not found. If you open Prettier console you can see the error, there is an open issue

So we see the lint and style errors, yet cannot reformat the code automatically on save. To work around this issue, use NPM script command.

Run this command and it should reformat the TS files and fix most ESLint issues.

Use Prettier + ESLint + Cypress

One final touch. If you write Cypress end-to-end tests, there is an official cypress-io/eslint-plugin-cypress plugin that can catch some common test mistakes. You can find an example «test» in project-with-Cypress/index.js file.

First, install the plugin

Then extend ESLint settings

Let’s say your test tries to get back an element using cy.get command.

Catch exclusive tests

If you are writing Cypress or Mocha tests, you might accidentally leave it.only or describe.only exclusive tests. The build pipeline will be forever green giving you a false sense of confidence. You can catch exclusive tests using eslint-plugin-mocha.

See example in subfolder ‘project-with-mocha’ of the demo repo.

First, let’s use the Mocha plugin and set the environment and globals.

Second, let’s try linting a spec file with an exclusive test

Nice, by default the mocha/no-exclusive-tests rules gives a warning. I recommend running lint step in pre-commit hook, where a warning is enough. From the pre-push Git hook I recommend making this rule an error.

Common ESLint problems

Disable a rule

To disable a rule in the same line

To disable a rule in a portion of the file

To disable a rule in the entire file (but be careful!), add to the top of the file:

Errors shown for async keyword

Sometimes ESLint reports a problem around async keyword.

Other languages

Format other languages with Prettier

Prettier can format many languages: JavaScript, JSON, Markdown, HTML, CSS, etc. Here is formatting CSS for example.

Format JSON files with Prettier

You can configure Prettier and its VSCode extension to format your JSON files. Since there is already a default JSON formatter built into VSCode, you need to tell VSCode to specifically use esbenp.prettier-vscode to format JSON files. Here is a sample project settings file.

Use custom settings overrides

Let’s save a JSON file.

Chrome extension

There is now Chrome Prettier extension that can format code blocks in text areas. Seems for now it is limited to StackOverflow and GitHub.

Run Prettier inside GitHub Action

Beautiful, and on every push, if there are any format changes, the code gets updated and pushed, which you can see from the list of commits.

Follow Gleb Bahmutov @bahmutov, see his projects at glebbahmutov.com, watch his Cypress videos, browse his presentations

Want to know more about Cypress? Check out cypress.tips

Have a Cypress question? Want me to answer it? Consider supporting me via GitHub Sponsors or by purchasing my Cypress courses.

Начните использовать Prettier правильно

Перевод статьи «Start Using Prettier The Right Way».

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

Настраиваем Prettier

Если Prettier у вас не установлен — установите (инструкция).

Ну а если вы все-таки хотите знать, что значат все эти настройки, — читайте дальше, я разберу каждую строку.

Объяснение настроек

Замыкающие запятые

Начиная с ES5 мы можем ставить замыкающие запятые в JavaScript-коде (обратите внимание, что они не разрешены в JSON). Мне очень это нравится, потому так можно просто добавлять свойства в объект, не проверяя сперва, есть ли запятая в расположенной выше строке. Казалось бы, один символ — сущая ерунда, ни на что не влияет. Но поверьте: влияет, и еще как.

Давайте посмотрим на эту опцию в действии.

Ширина Tab

Эту опцию объяснить проще всего. Речь идет о смене ширины отступа, который вы делаете клавишей tab, с дефолтных 4 пробелов на 2.

Смотрим в действии.

Точки с запятой

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

Стандартизированные кавычки

Две последние опции касаются кавычек. Вторая из них нужна, если вы пишете JSX. Эти опции указывают Prettier конвертировать все двойные кавычки в одинарные. Если вам нужно использовать апостроф, просто воспользуйтесь клавишей escape, и Prettier сделает именно в этой отдельной строке двойные кавычки.

Опция в действии.

Итоги

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

Примечание редакции Techrocks. Приведем также пару комментариев к оригинальной статье.

Niki Hristov

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

Michael, в ответ Niki Hristov

Вы можете сократить свой файл конфигурации, удалив опции, которые совпадают с дефолтными настройками Prettier.

В документации указан еще один способ конфигурации. Можно опубликовать свой конфиг как NPM-пакет, хотя бы даже только на GitHub. После этого вы сможете устанавливать свой собственный пакет во все свои проекты. Таким образом любой человек, который тоже захочет поработать над вашими проектами (контрибьютор на GitHub) будет использовать тот же конфиг-файл.

Как автоматически форматировать код в коде Visual Studio с помощью Prettier

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

Это повысит вашу продуктивность, не тратя время на форматирование кода. Если строка становится длиннее и не умещается на экране.

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

Итак, в этой статье мы увидим, как настроить средство форматирования Prettier в Visual Studio Code (VS Code).

Автоматически форматировать код при сохранении файла

Установите Prettier расширение для VS Code, которое форматирует код, написанный на Javascript, Angular, Vue, React, Typescript и многих других языках.

Установка

Использование

Вот и все! Поздравляю! Вы настроили красивее для форматирования в соответствии с настройками по умолчанию.

Теперь откройте любой код JavaScript / React. Допустим, ваш код выглядит так:

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

Теперь, если вы сохраните какой-либо файл, вы увидите, что файл отформатирован правильно.

Если у вас есть такой код:

Затем при сохранении он будет отформатирован следующим образом:

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

Теперь напишите код так, как хотите, и просто сохраните файл, чтобы отформатировать его.

Это повысит вашу продуктивность, так как вы не будете тратить время на форматирование кода.

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

Расширенные конфигурации

Если вам нужен больший контроль над форматированием, prettier также позволяет это.

Настройка ESLint, Prettier, pre-commit hook (create-react-app, visual studio code)

(вы читаете один из разделов обновленного руководства по Redux, которое вышло в августе 2018)

Кратко о библиотеках:

ESLint

Линтер — это помощник по части «здоровья» кода. Вы определяете список правил и в дальнейшем, при настроенном плагине в вашем редакторе, он как Microsoft Word «проферка орфографии» проверяет все, что вы написали.

Например, определили переменную, но нигде не используете? Сработает правило: no-unused-vars (долой неиспользуемые переменные) и переменная будет подчеркнута.

Когда вы видите «подчеркивание», и после наведения видите в скобочках название правила — не нужно бежать гуглить. Нужно идти на сайт eslint.org и там в «поиск» вставлять текст ошибки, будет быстрее.

Prettier

Преттир — это помощник по части оформления кода. Можно писать с пробелами перед именем свойства, кавычками, запятыми в последней строке и тд тп — преттир, настроенный на сохранение или на пре-коммит хук — «перетрясет» ваши файлы и оформит их в соответствии с настройками, которых у него минимум. Это сделано специально, ибо чем меньше настроек, тем меньше конфигураций. Когда-нибудь, спор «табы vs пробелы» уйдет в небытие, но кто выиграет?)

Одна из работ «преттира» — форматировать длинные строки.

Я думаю преимущества очевидны, поэтому давайте настроим необходимые ускорители повседневной разработки.

Настройка

Линтер встроен в create-react-app, но для работы в связке с Prettier, а так же для подсветки кода во время написания в VS Code нужна небольшая донастройка.

Для начала установите пакеты:

Все пакеты в целом понятны зачем, кроме lint-staged и husky

Husky и lint-staged — сладкая парочка для борьбы с плохим кодом в нашем репозитории. Например, мы можем настроить, что если ESLint вернул ошибку, то коммит будет автоматически отменен. Вернемся к этому позже.

Итак, настройка eslint, создайте следующий файл в корне проекта:

Достаточно скромный конфиг, который «наследует» стандартные правила (их много) из react-app и prettier (это глобальные конфиги, один встроен в create-react-app, второй мы установили посредством пакета eslint-config-prettier)

Затем я переопределил одно правило: jsx-quotes (для имен классов внутри JSX будут ставится двойные кавычки. Не могу сказать, насколько это важно на сегодняшний день, но раньше у меня были конфликты с преттиром без этого правила).

Вы можете переопределить в списке любые правила, которые вас интересуют. Список можно найти в документации, но проще просто начать работать и по ходу пьесы смотреть на «подчеркивания». Те, которые вас не устраивают — переопределяйте.

Последняя опция в конфиге — использование плагинов. Мы используем плагин prettier (пакет eslint-plugin-prettier), потому что у нас будет стоять настройка autoFixOnSave (автоматически исправляй на «сохранение») в редакторе и в момент «сэйва» код будет преображаться.

После настройки конфига, вам нужно настроить ваш редактор. Я приведу пример только для Visual Studio Code.

Добавьте в файл с настройками, следующие строки:

Для корректной работы вам потребуется парочка плагинов из маркет-плейса (eslint и prettier).

Мой список плагинов:

Каша в голове?) Ничего, мы же с вами в разделе настройки окружения, много новой информации. Попробуйте все это настроить, перечитать и все устаканится.

Если вам нужны подробности, можете посмотреть видео (EN) по настройке.

Настроим prettier (нам так же нужен конфигурационный файл):

Вот и все настройки. Настройка — parser, вам пока не должна мешать, а что такое trailingComma — пример ниже:

Почему так? Мне это нравится, так как если добавится новое свойство, в git difference (изменения в файле) будет только одна строка, вместо двух (в одной добавилась бы запятая, во второй — новое свойство).

На данный момент, если вы будете писать код, у вас уже будет отрабатывать eslint. Так же в момент сохранения, код будет преобразовываться с помощью prettier. Однако, нам еще не хватает настройки пре-коммит хука.

Представьте ситуацию: вы работает с коллегой. Он пишет в блокноте, у него нет никаких «преттиров». Следовательно, чтобы он не закоммитил код, который не отформатирован как вам нужно, мы настраиваем пре-коммит хук. Это значит, в момент коммита, весь js/jsx/json код из директории src, который он «коммитит» будет преобразован преттиром, так же, как если бы он преобразовался при сохранении в вашем редакторе.

В секции scripts добавилась команда precommit, и добавилось свойство lint-staged с настройками.

Теперь в момент коммита, в терминале будет похожая ситуация:

Резонный вопрос, у коллеги с блокнотом, у него и ESLint отсутствует же? Верно. Нужно усложнить ему жизнь и «обламывать» коммит, если в нем есть ошибки/предупреждения от ESLint.

Выполните команду в терминале (находясь в директории с проектом):

Так как я не люблю глобальные зависимости, я использую локально установленный eslint (его установил для нас create-react-app). Чтобы упростить вызов в терминале, можно добавить в секцию scripts в package.json новую команду:

Вернемся к настройке. Изменим lint-stage скрипт в package.json на:

Теперь в момент пре-коммита будет запускаться lint-staged проверка в которой eslint и prettier.

Итого: Настроили ESLint, prettier и pre-commit hook. Очень сильно облегчили жизнь себе и коллегам, кто болеет за единый стиль и чистый код.

prettier settings for vscode

I recently switched to a new computer, and am having difficulty with a prettier setting. (I think it’s prettier, could be eslint).

Anyone know what this setting is called? I would prefer all imports to be on a single line unless the length extends the printWidth setting.

Here are my relevant User Settings from VS Code:

Edit: Visual depiction so you don’t need to watch the gif.

7 Answers 7

Trending sort

Trending sort is based off of the default sorting method — by highest score — but it boosts votes that have happened recently, helping to surface more up-to-date answers.

It falls back to sorting by highest score if no posts are trending.

Switch to Trending sort

For those trying to quickly change Prettier settings for VS Code. Here are the steps:

The new way to configure prettier settings:

I’d suggest doing this in each of your projects and including in any source control, that way every pull of the repo will automatically set some base settings for that developer’s instance of prettier.

I had a similar issue. To fix this, go into your prettier extension settings and look for «Print Width». Mine was set to ’80’. I changed it to ‘100’ and it all fit on one line after I saved the file. You can change the width to whatever you would like.

I had issue with formatting in VSCode. It was taking extension settings from prettier.

These settings worked for me in vs code.

If Prettier isn’t showing up in your VS Code Settings, the extension may have silently crashed, which happens often when settings are changed in multiple places (i.e. tab size was changed in workspace as well as in settings).

Restart VS Code, and search for Prettier again, it should show up this time 🙂

Переносим Angular проект на ESLint, с Prettier, Husky и lint-staged

Привет, Хабр! Меня зовут Богдан, я работаю в ПИК Digital Front-End тимлидом. Большую часть проектов мы разрабатываем на Angular и недавно я решил пересмотреть наши стайл гайды, а также добавить новые инструменты для более удобной работы.

В качестве линтера я решил использовать ESLint, так как в скором времени на него планируют перевести Angular. И в этой статье я хочу поделиться инструкцией по переходу с TSLint на ESLint, а заодно рассказать, как запускать Prettier из ESLint, как добавить правила стайл гайда AirBnB, и как сделать линтинг удобным и незаметным с помощью настройки VS Code и Git хуков.

Prettier & ESLint

ESLint — это инструмент для статического анализа кода, правила в нём делятся на две группы:

Вопрос, который меня интересовал: зачем использовать Prettier, если ESLint тоже умеет форматировать код?

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

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

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

Если же мы сохраним или форматируем файл с Prettier, то строка примет вид:

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

Настройка ESLint

Суть линтинга с помощью ESLint заключается в парсерах, которые трансформируют код в AST (Abstract Syntax Tree) для дальнейшей программной обработки, и плагинах, которые содержат правила, например, рекомендуемые правила для линтинга TypeScript или правила код гайда AirBnB.

Установка

Для миграции Angular приложения на ESLint нам потребуются следующие зависимости:

На момент написания статьи в typescript-eslint и angular-eslint реализованы не все эквиваленты для правил из стандартной конфигурации Сodelyzer для TSLint, но большая часть уже есть. Отслеживать актуальное состояние переноса правил из TSLint в ESLint вы можете в монорепозиториях Angular ESLint и TypeScript ESLint.

Настройка конфига

Конфиги можно описывать в разных форматах: JavaScript, JSON или YAML file. В JavaScript можно оставлять комментарии.

«plugin:@angular-eslint/recommended» содержит настройки сразу для 3 плагинов: «@typescript-eslint/eslint-plugin», «@angular-eslint/eslint-plugin» и «@angular-eslint/eslint-plugin-template». Прочитать, какие правила он задаёт, можно тут.

Обновление команды ng lint

Также в конфигурации angular.json нужно обновить команду ng lint на запуск @angular-eslint/builder:

Базовая настройка ESLint готова, теперь запустить ESLint можно стандартной командой ng lint.

Установка дополнительных плагинов

Чтобы установить плагин для ESLint, например, для линтинга unit-тестов в Angular, надо скачать и добавить в настройки плагин Jasmine:

И добавить в свойство «overrides» новый блок настроек для файлов с расширением *.spec.ts:

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

Добавляем правила стайл гайдов

Чтобы достичь большей консистентности кодовой базы, можно выбрать и добавить в конфиг ESLint правила одного из популярных стайл гайдов:

Выбирайте реализацию стайл гайда на TypeScript, потому что правила для JavaScript могут неправильно отрабатывать на TypeScript.

В качестве примера, добавим в наш конфиг ESLint правила стайл гайда AirBnB. Для этого установим конфиг с правилами AirBnB для TypeScript и плагин с правилами для работы с синтаксисом import/export:

А также в свойстве «overrides» добавим правила стайл гайда AirBnB в блок с правилами для файлов с расширением «*.ts»:

Чтобы добавить другой стайл гайд, нужно установить набор правил для TypeScript, создать новый блок правил в «overrides» с правилами стайл гайда и указать необходимый для их работы парсер.

Кастомизация правил

Если вы хотите отключить или переопределить какие-то правила стайл гайда, то это можно сделать в свойстве «rules»:

Настройка Prettier

Чтобы добавить Prettier в нашу конфигурацию, нам надо установить сам Prettier, плагин с правилами Prettier, а также конфиг, который отключит все правила, которые могут конфликтовать с Prettier:

В «overrides» в блоке с правилами файлов с расширением *.ts в свойство «extends» в самый низ добавьте правила и настройки Prettier:

Конфигурация для Prettier всегда должна быть в самом низу списка, чтобы перезаписать все правила, которые могут конфликтовать с Prettier.

`prettier/@typescript-eslint` отключает правила `@typescript-eslint`, которые могут конфликтовать с Prettier, а `plugin:prettier/recommended` делает три вещи:

Конфиг для Prettier:

Эти настройки будут использоваться как ESLint, так и Prettier, если вы будете использовать его для форматирования файлов в VS Code или с помощью команды:

Настройка VS Code

А чтобы форматировать документ комбинацией клавиш «shift+option+F» или «shift+alt+F» скачайте плагин Prettier для VS Code, и установите его как форматировщик по умолчанию.

Настройка Git хуков

Git хуки — это скрипты, которые Git вызывает при определённых событиях: commit, push, recieve.

С помощью них, мы можем запускать линтинг кода при создании коммита, чтобы в пул реквесты попадало меньше ошибок. Для более удобной работы с Git хуками установим Husky, а чтобы проверять только тот код, который добавлен в коммит (это полезно в больших проектах, где линтинг занимает много времени) lint-staged:

Добавим настройки для этих плагинов в package.json:

lint-staged передаёт в вызываемую команду массив изменённых файлов. Команда ng lint не умеет принимать массив файлов, и для её использования надо писать дополнительный скрипт-обработчик. А можно просто вызвать ESLint, как в этом примере. Такое решение можно использовать для прекоммитов, а ng lint запускать для линтинга всего проекта, например в CI пайплайне.

Выводы

В будущих версиях Angular ESLint с базовыми правилами будет из коробки. Сейчас процесс настройки ESLint требует некоторых дополнительных действий, в ESLint нет эквивалентов для некоторых правил из TSLint, и Angular ESLint ещё находится в alpha-версии. Поэтому переходить сейчас на ESLint или нет — решать вам.

Однако код гайды, дополнительные правила, Prettier, Husky и lint-staged вам придётся настраивать самостоятельно. Надеюсь эта статья помогла вам разобраться как все эти вещи работают вместе.

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

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

Пример реализации можно посмотреть на Github.

Если вы нашли ошибку в конфиге, или у вас есть дополнения — пишите!

Подготовка окружения React-приложения: VSCode, Prettier, ESLint, Stylelint, Husky

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

Введение

Сейчас мы разберём как настроить линтеры для вашего React проекта, как настроить автоформатирование кода, подсветку ошибок и git хуки. ESLint, Prettier, StyleLint, Husky, Lint-staged, VSCode — все эти технологии будут полезны как в командной, так и в соло разработке.

Git хуки — позволяют запускать кастомные скрипты перед вызовом git команд.

Совокупный результат этих технологий даст нам следующие преимущества:

Установка

Подготовка рабочего окружения будет происходить в рамках VSCode и CRA в связке с TypeScript.

Сразу установим необходимые расширения:

Если данный пример вам не подходит, и вы не хотите углубляться в теорию и практику настройки, то можно перейти к главе React-third-hand.

VSCode

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

settings.json — настройки VSCode для проекта.

У VSCode есть две области видимости настроек: User (глобальные) и Workspace (для проекта).

Приведу следующий пример настроек:

extensions.json — позволяет указывать рекомендованные и нежелательные расширения для проекта. Для добавления вам нужно написать ID плагина, которое вы можете взять через панель расширений, нажав шестеренку.

Prettier

Основная задача Prettier — форматировать код по заданным правилам.

Базовая настройка

Для автоформатирования при сохранении нам необходимо сделать следующее:

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

Создадим в корне приложения файл .prettierrc. В проектах RentaTeam мы используем следующие настройки:

Более подробно можно прочитать в официальной документации Prettier.

Игнорирование правил

Если нужно игнорировать форматирование в определенных файлах, то можно создать файл .prettierignore.

Пример с потолка:

Также есть возможность отключения форматирования для блока. Для этого в коде нужно добавить комментарий:

ESLint

Статический анализатор кода, который подсвечивает проблемные места в зависимости от заданных правил.

Базовая настройка

Разберём пакеты которые нам необходимы для настройки:

eslint-plugin-react — обширный список правил для работы с React. По умолчанию в нём включены некоторые проверки, остальные нужно прописывать в rules. Здесь можно ознакомиться с правилами более подробно.

eslint-plugin-react-hooks — правила для работы с React хуками.

eslint-plugin-jsx-a11y — включает в себя правила для правильного написания HTML тэгов.

@typescript-eslint/parser — анализатор ESLint, который использует TypeScript ESTree, чтобы позволить ESLint анализировать исходный код TypeScript.

@typescript-eslint/eslint-plugin — правила для работы с TypeScript. Полный список правил можно найти на сайте пакета.

Все вышеперечисленные зависимости присутствуют в CRA и их правила прописаны внутри пакета. Конфигурация находится в package.json, давайте удалим её и создадим в корне проекта .eslintrc:

Поле extends использует заготовленный файл конфигураций, который применяет набор правил.

Добавим скрипты в package.json для анализа и фикса кода. В дальнейшем они нам понадобятся для настройки прекоммит-хука.

Естественно автофикс скрипт не сможет исправить все ошибки и в большинстве случаев потребуется вносить изменения вручную.

Игнорирование правил

Создаём файл .eslintignore в корне проекта, где указываем файлы/директории для ESLint которые не нужно учитывать.

И снова пример с потолка:

Также у нас есть два варианта игнорирования правила внутри кода:

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

Здесь можно прочитать более подробно

Синхронизация ESLint и Prettier

Eslint подсвечивает ошибки, Prettier форматирует! Это важный момент при работе с помощниками: ESLint имеет собственный форматер, но не во всех ситуациях он может делать правильно и красиво. Prettier vs. Linters · Prettier

Мы можем передать правила Prettier в ESLint, чтобы он подсвечивал проблемные места, связанные с форматированием. Установим зависимости для проекта:

eslint-config-prettier — отключает правила, которые могут конфликтовать с prettier.

eslint-plugin-prettier — даёт возможность отображать ошибки связанные с правилами prettier.

plugins даёт возможность работать с правилами и настроить их с нуля.

В rules мы описываем правила которые предоставляет нам extends и plugins.

Порядок импортов

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

eslint-plugin-import — Данный плагин добавит в ваш проект проверки для импортов и будет следить за тем, чтобы все импортируемые зависимости присутствовали в проекте, подключались в удобном для последующей работы порядке и так далее. Он также входит в CRA.

eslint-import-resolver-typescript — необходим для разрешения абсолютных импортов ts/tsx файлов.

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

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

В шаблоне CRA и Next: абсолютные импорты настраиваются в tsconfig.json или jsconfig.json при помощи параметра baseUrl. Данная опция позволяет импортировать файлы относительно заданной директории.

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

StyleLint

Линтер для стилей, позволяет избежать ошибок и писать код в одной парадигме. Поведение очень схоже с ESLint.

Базовая настройка

stylelint-order — отвечает за настройку приоритетов и группировки стилей.

stylelint-config-clean-order — правила для написания стилей в правильном порядке. Если есть желание узнать в каком порядке пишутся стили, то можно посмотреть здесь.

В корне с проектом создадим .stylelintrc:

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

После всех этих настроек в файлах css будут подсвечиваться ошибки и при возможности он будет их исправлять.

Не забываем создать скрипты для StyleLint.

Автофикс скрипт не сможет исправить все проблемные места и в большинстве случаев потребуется вносить изменения вручную.

Игнорирование правил

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

Создадим файл .stylelintignore в корне проекта:

Название правила высвечивается при наведении на проблемный участок кода.

Синхронизация StyleLint и Prettier

Чтобы StyleLint и Prettier не конфликтовали, нам нужно установить зависимость:

stylelint-config-prettier — отключает все правила, которые могут конфликтовать с Prettier.

Добавим «stylelint-config-prettier» правила в поле extends:

Теперь эта парочка не будет сориться, исправлять некоторые ошибки и форматировать код.

Синхронизация StyleLint и SCSS/SASS

Для поддержки SCSS/SASS кода установим зависимость:

stylelint-config-standard-scss — расширяется от пакета stylelint-config-standard и также содержит согласованные правила.

В .stylelintrc заменим в поле extends stylelint-config-standard на stylelint-config-standard-scss :

Синхронизация StyleLint и Styled Components

У этой связки не всё так сладко — автофикс не работает, только подсветка ошибок Следовательно, удаляем скрипт фикса в package.json и .stylelintignore нам не понадобится.

Устанавливаем зависимости и разберём пакеты:

stylelint-config-styled-components — эта общая конфигурация автоматически отключит правила, вызывающие неразрешимые конфликты.

stylelint-processor-styled-components — пакет для настройки парсера StyleLint, который будет автоматически определять стилизованные компоненты.

В результате получаем следующий .stylelintrc:

Husky и Lint-Staged

Husky — позволяет запускать собственные сценарии при работе с git.

Lint-Staged — поможет предотвратить коммит, если в индексированных файлах были найдены ошибки.

Базовая настройка

Запустим скрипт для настройки:

Подробнее об установке можно прочитать на официальном сайте Husky.

Теперь перед коммитом будут выполняться проверки линтера и если кто-то из них вернёт ошибку, то потребуется её исправить и снова проиндексировать изменения.

React-third-hand

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

Выбираете тип своего приложения, пакетный менеджер, язык программирования, помощников и вид стилизации.

Пакет является моим самописом и я буду признателен любому вашему пул реквесту для поддержки проекта.

Бонус

Подборка расширений

В моём VSCode арсенале, помимо ESLint, Prettier и StyleLint, есть ещё несколько интересных плагинов и полезных практик.

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

Code Spell Checker

Code Spell Checker — проверяет орфографию в коде, выдаёт список правильного написания и позволяет расширять словарь.

Russian — Code Spell Checker — дополнение основного расширения для поддержки русского языка.

ToDo Highlight

TODO Hightlight — подсвечивает ключевые слова в комментариях.

Notes

Notes — удобное расширение для заметок в .md формате.

Thunder Client

Thunder Client — хорошая альтернатива Postman. Служит для отправки запросов с разными параметрами и также есть возможность коллекционирования.

VSCode Icons

VSCode Icons — набор иконок для файлов.

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

One Dark Pro

Моя любимая тема и также пара настроек для неё:

Настройки VSCode

Fira Code

Fira Code — популярный набор лигатур. Плюс к внешнему виду и читаемости.

Устанавливаем шрифты и настраиваем VSCode:

Inlay Hints

Приятное нововведение в VSCode, которое сразу отображает динамические типы у разных конструкций.

Выглядит следующим образом:

Для её активации, необходимо:

File Nesting

Группировка файлов в один. Может быть полезно для массивно повторяющейся файловой структуры.

Например, скроем все наши конфиги под package.json.

Для этого пропишем настройки:

Заключение

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

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

Using Prettier with VS Code and Create React App

Having consistent code formatting and style is an important part of reducing cognitive load when working with others or when jumping around between projects. A frequent scenario seems to be that a developer meeting is held to come up with a company coding standard. It starts off with good intentions and good progress is initially made, but then a roadblock is encountered trying to come to an agreement on a private field prefix or to use spaces instead of tabs. The meeting ends up being a wash, people are frustrated and “Frank” ends up getting a special pass to prefix his private fields with my_ and use tabs while everyone else uses _ and spaces.

Thankfully human beings are incredibly adaptive and will quickly “get used” to using a new style of tool if they don’t have a choice. For example I used to think that JSX was an abomination, but I quickly came to realise that it is actually a thing of beauty. This is where Prettier comes in.

Prettier is an “opinionated code formatter” which has some very sensible defaults and can be used to ensure that all committed code looks the same. By using an automated and opinionated tool everyone’s personal opinion is taken out of the equation and developers can just get on with developing and no longer have to waste time formatting their code.

Getting setup in Visual Studio Code

This tutorial assumes that you are using Create React App, Yarn and Visual Studio Code. The instructions shouldn’t be too different if you are using NPM or another React/JavaScript environment.

Please note that Create React App will not show any Prettier errors in the browser console or terminal output. The errors will only be shown in Visual Studio Code.

Step 1: Install Prettier and the ESLint Plugin

Note: You will need to install ESLint if you are not using Create React App

You will need to install the Prettier package and then the ESLint Prettier plugin. The plugin allows Prettier violations to be reported as ESLint errors.

Step 2: Install the Prettier and ESLint VS Code Extensions

Install the following Visual Studio Code Extensions:

Step 3: Create the Prettier and ESLint Configuration files

Step 4: Apply Prettier Formatting on Save (Optional)

You most likely want to apply the Prettier formatting whenever you save your files. To do so, add the following to your Visual Studio Code Workspace Settings:

Step 5: Prevent Prettier Violations from being Committed (Optional)

Note: Your Git repository must already be initialised, otherwise the precommit hooks will not be installed by husky.

Install the packages:

Then add the husky section to your package.json file:

Conclusion

Automated code formatting against sane settings saves a lot of grief and time. It works well and is very easy to setup, so it should be considered a must in any project. Prettier isn’t the first or only tool for the job, so if it is not suitable for you, then there is bound to be another one to suit your environment or team.

Write cleaner code using Prettier and ESLint in VSCode

A short and simple tutorial to help you configure Prettier and ESLint to work together in VSCode.

ESLint is the one of the most widely-used linting tools in web development. It’s an invaluable tool for keeping your (and your team’s) code consistent by ensuring everyone is following the same style conventions. ESLint is often configured to run during a Git hook to avoid allowing commits or pushes with code that violates the style guidelines.

But finding out that you have ESLint warnings to resolve when you’re ready to commit is annoying. Why not let VSCode give us real-time ESLint warnings? That way, when we commit, we already know that our code will pass the linter.

First, you should have ESLint installed globally.

Depending on your package manager, run

We can do better.

VSCode is now showing us all of our ESLint warnings. But we still have to correct them manually. Boo! To make life easier on ourselves, let’s install another tool called Prettier. Prettier will auto-format our code for us when we ask it to or when we save a file.

We also need to install an extension for VSCode to make it work in the editor. Install Prettier — Code formatter from the VSCode extension marketplace:

With Prettier installed, we can auto-format a file or a selection by using the Command Palette option Format Document. Alternatively, we can utilize the shortcut combos Shift+Option+F / Shift+Alt+F.

We’re not quite finished yet. Prettier comes with a default configuration which probably won’t agree with the ESLint configuration that our project is using. Watch what happens when Prettier and ESLint aren’t using the same style rules:

Fortunately, there is an easy solution to this problem!

Now watch as Prettier auto formats out code using our ESLint configuration rules:

I hope this helps and is easy to follow! Please leave comments/questions/corrections!

Переносим Angular проект на ESLint, с Prettier, Husky и lint-staged

Большую часть проектов в ПИК Digital мы разрабатываем на Angular и недавно я решил пересмотреть наши стайл гайды, а также добавить новые инструменты для более удобной работы.

Prettier & ESLint

ESLint — это инструмент для статического анализа кода, правила в нём делятся на две группы:

Prettier — это инструмент автоматического форматирования кода.

Вопрос, который меня интересовал: зачем использовать Prettier, если ESLint тоже умеет форматировать код?

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

Если же мы сохраним или форматируем файл с Prettier, то строка примет вид:

Настройка ESLint

Установка

Для миграции Angular приложения на ESLint нам потребуются следующие зависимости:

Для их установки достаточно запустить команду:

Настройка конфига

Конфиги можно описывать в разных форматах: JavaScript, JSON или YAML file. В JavaScript можно оставлять комментарии.

Обновление команды ng lint

Также в конфигурации angular.json нужно обновить команду ng lint на запуск @angular-eslint/builder:

Базовая настройка ESLint готова, теперь запустить ESLint можно стандартной командой ng lint.

Установка дополнительных плагинов

И добавить в свойство “overrides” новый блок настроек для файлов с расширением *.spec.ts :

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

Добавляем правила стайл гайдов

Выбирайте стайл гайд, который больше подходит вашей команде. Можете поочередно попробовать все стайл гайды на каком-нибудь большом проекте, посмотреть, какие ошибки выдаёт линтер и на основании этого сделать выбор.

Выбирайте реализацию стайл гайда на TypeScript, потому что правила для JavaScript могут неправильно отрабатывать на TypeScript.

Чтобы не изменять верхнеуровневые настройки, создадим новый блок правил в свойстве “overrides” с правилами стайл гайда AirBnB, и необходимым для их работы парсером TypeScript:

Чтобы добавить другой стайл гайд, нужно установить набор правил для TypeScript, создать новый блок правил в “overrides” с правилами стайл гайда и указать необходимый для их работы парсер.

Кастомизация правил

Если вы хотите отключить или переопределить какие-то правила стайл гайда, то это можно сделать в свойстве “rules”:

Настройка Prettier

В “overrides” в блоке с правилами файлов с расширением *.ts в свойство “extends” в самый низ добавьте правила и настройки Prettier:

Конфиг для Prettier

Настройка VS Code

А чтобы форматировать документ комбинацией клавиш shift+option+F или shift+alt+F скачайте плагин Prettier для VS Code, и установите его как форматировщик по умолчанию.

Настройка Git хуков

Git хуки — это скрипты, которые Git вызывает при определённых событиях: commit, push, recieve.

Добавим настройки для этих плагинов в package.json :

Выводы

Пример реализации можно посмотреть на Github.

Программируем лучше с ESLint, Prettier и TypeScript

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

Как все начиналось

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

Во-первых, бесконечные споры о том, как писать и форматировать код. Это действительно надоевшая всем тема, по крайней мере, для меня. Личным предпочтениям тут не место. Есть более важные вещи, на которые стоит обратить внимание.

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

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

И, в конце концов, это всё про бизнес, неважно насколько нам нравится то, что мы делаем. Это просто трата времени. Вы можете потратить его эффективнее.

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

Инфо Скорее всего поддержки TSLint в Angular не будет в ближайшее время т.к. TypeScript решили внедрить ESLint вместо TSLint. Команда Angular уже работает нам переездом с TSLint на ESLint. См. issue.

Что такое ESLint, и как это может помочь нам?

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

Что я должен сделать, чтобы начать использовать ESLint?

Я рассчитываю, что у вас уже установлены node и npm, и вы знакомы с ними.

Создание рабочей папки

Установка ESLint

Теперь давайте создадим package.json, чтобы мы могли установить ESLint. Выполнение команды npm init создаст package.json, который необходим для установки eslint в вашу папку.

Добавьте eslint в ваши npm скрипты

Подсказка «eslint»: «eslint» в скриптах — это сокращение для node_modules/.bin/eslint.

Создайте test.js

Давайте создадим простой JavaScript-файл в папке lint-example, куда мы установили ESLint. Не переживайте о плохом форматировании примера. Нам нужно это для старта.

Первая попытка в командной строке

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

Если вы использовали const или let в примере выше, ESLint генерирует ошибку, потому что, как уже говорилось, ES5 выбран по умолчанию.

Становится интереснее!

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

Давайте создадим наш первый .eslintrc.

Существует несколько способов передать конфигурации в ESLint. Я предпочитаю .eslintrc. По ссылке вы найдете другие способы.

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

Возможно, вы увидели в выводе результата ESLint, что 20 проблем из 26 могут быть решены автоматически. Мы вернемся к этому в следующем разделе.

ESLint и форматирование кода?

Вы видите, что ESLint исправляет не все правила. Оставшиеся три ошибки необходимо поправить вручную, однако остальные ошибки из отчета ESLint (такие как «Пропущенная точка с запятой», «Неправильные отступы», «Множественные пробелы») были исправлены автоматически.

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

В документации ESLint вы можете найти, какие правила можно активировать с помощью иконки «check mark». Код, который может быть отформатирован автоматически, подсвечивается с помощью иконки гаечного ключа.

Всё это становится мощнее, если код форматируется вашей IDE при изменении (сохранении) файла, или если любой инструмент автоматизации, например travis-ci, может взять на себя эту задачу, когда что-то отправляется в Git.

Если ESLint может форматировать ваш код, что тогда делает Prettier?

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

Что надо сделать, чтобы начать использовать Prettier?

Как мы помним, этот код был отформатирован ESLint, и он не очень хорошо оформлен.

Так намного лучше. Чем больше кода, тем лучше результат.

Могу ли я настраивать Prettier?

Да. Настроек в парсере Prettier не так много, как в ESLint. С Prettier вы полностью во власти парсера Prettier. Основываясь на небольшом количестве опций, он сам решает, как будет выглядеть ваш код.

Это мои настройки, которые описаны в файле .prettierrc. Полный список опций вы можете найти по ссылке. Давайте создадим .prettierrc-файл с такими опциями.

Запускать ли ESLint и Prettier одновременно?

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

Как всё это начиналось!

Как я писал в начале статьи, я никогда не использовал ESLint и Prettier прежде. Следовательно, я не знал, как эти утилиты работают. Как любой разработчик, я копировал наилучший кусок кода из глубин интернета в мой .eslintrc-файл без понимания, что это даст. Главной целью было, чтобы это работало.

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

Если коротко, то там настройки и плагины для ESLint, предоставленные сообществом открытого исходного кода. Мы не должны делать их сами. Главное понимать, как это работает под капотом.

.eslintrc

Заметка Возможно, вы заметили prettier в плагинах, и вы все еще помните, что я писал выше: «Должны ли мы одновременно запускать ESLint и Prettier для форматирования кода?» Ответ нет, потому что eslint-plulgin-prettier и eslint-config-prettier сделают всю работу за вас.

Что означают эти настройки и опции?

После того, как я заставил систему работать, то задался вопросом, а что это всё значит. Это буквально выбило меня из колеи. Если вы запустите ESLint в вашей консоли с этими опциями, то получите сообщение об ошибке, что конфига (расширения) и плагины не установлены. Но откуда мы можем знать, что устанавливать? Каждый знаком с процессом, вы находите кусок кода на StackOverflow или в каком-то репозитории и потом не знаете, как правильно запустить его.

Вы должны помнить, что все модули внутри extends и plugins могут быть установлены. Но сначала вы должны узнать, как интерпретировать соглашение об именах в свойствах, чтобы иметь возможность устанавливать их через npm.

Что такое опции «плагина»?

Плагины содержат правила написанные с использованием парсера. Это могут быть правила на рассмотрении из TC39, которые еще не поддерживаются ESLint, или специальные рекомендации по написанию кода, которые не представлены в ESLint, например, unicorn/better-regex, import/no-self-import.

Представьте, что вы хотите ввести правило, которое гласит, что в начале файла перед написанием какой-либо строки кода всегда должен быть комментарий, начинающийся со смайлика. Звучит странно, но вы можете сделать это с помощью ESLint Plugin.

Давайте узнаем, как интерпретировать соглашение об именах плагинов

Еще пример, работает так же:

Становится немного сложнее, когда вы сталкиваетесь с именами плагинов, которые начинаются с @ (пространство имен). Как видно из приведенного ниже примера, использование / ограничено одним уровнем. Вы должны учитывать, что @mylint и @mylint/foo находятся в одном и том же пространстве имен, но это два разных плагина (npm-модуля).

Код примера ниже такой же, как и сверху.

Подсказка Используйте сокращенную форму (из первого примера) вместо длинной формы (из второго примера). Главное, чтобы вы понимали, как ESLint это конвертирует внутри.

Теперь мы знаем, как работает соглашение об именах для плагинов. Установите следующие плагины ESLint через npm.

npm i eslint-plugin-prettier eslint-plugin-unicorn

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

Для тестирования ваш .eslintrc должен выглядеть следующим образом:

Prettier: ESLint плагин для форматирования кода.

Unicorn: дополнительные правила, которые не поддерживаются ESLint.

Давайте выясним, как интерпретировать соглашение об именах в расширениях

Прежде всего, если вы считаете, что соглашение об именах в разделе extends такое же, как и у плагинов, я должен вас разочаровать. Есть отличия. Должен честно признать, что мне потребовалось много времени, чтобы заметить разницу. Это было отчасти потому, что ESLint — сложная и обширная тема, по крайней мере, для меня.

Давайте установим остальные модули npm для нашего примера.

npm i eslint-config-airbnb-base eslint-config-prettier

Конфиг предоставляет предварительно настроенные правила. Эти правила могут состоять из правил ESLint, правил сторонних плагинов или других конфигураций, таких как синтаксический анализатор (babel, esprima, и т.д.), параметров (sourceType, и т.д.), окружений (ES6, и т.д.) и других.

Звучит неплохо? Да, потому что мы не должны делать всё сами. Продвинутые разработчики и команды уже потратили на это много времени. Всё, что нужно сделать, это активировать правила, указав конфиг или набор правил плагинов.

Где я могу найти эти наборы правил?

Есть разные способы их найти.

Во-вторых, знание того, какой набор правил использовать даже без чтения README.md — вот, что я считаю гораздо более эффективным. Особенно, если файл README.md является неполным или неправильным.

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

eslint-config-airbnb-base

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

Использование:

Держите в уме Порядок играет роль, потому что набор правил будет расширять или перезаписывать предыдущие. Так что не переусердствуйте с конфигами и плагинами. Смотрите хорошее объяснение на StackOverflow.

eslint-plugin-prettier

Теперь мы подошли к захватывающей части статьи. Как мы можем использовать Prettier напрямую в ESLint, не запуская его в качестве отдельной службы в нашей командной строке или IDE?

Использование:

Подсказка Плагины должны быть зарегистрированы в plugins и активированы в extends с использованием :plugin префикс.

eslint-config-prettier

Использование:

Мой личный конфиг ESLint выглядит как приведенный выше пример. Я использую TypeScript и плагин Unicorn. Не хочу, чтобы они конфликтовали с ESLint. Поэтому некоторые правила TypeScript и Unicorn отключены через Prettier.

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

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

.eslintrc

Итак, вернёемся к нашему тестовому примеру. Теперь наш .eslintrc-файл должен выглядеть следующим образом:

Как мы можем интегрировать это в IDE?

Почему существуют разные типы парсеров «ESLint»?

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

Как насчёт Angular и ESLint?

Команда Angular придерживается мнения, что нам следует подождать с применением ESLint. Это допустимо, потому что они хотят сделать переход как можно более плавным, но если вы всё же хотите попробовать, вот несколько советов.

Производительность и ESLint?

Может случиться, что ESLint не так эффективен, как можно было бы ожидать в некоторых частях кода, но это нормально и может произойти также в TSLint. Для решения проблемы вы можете использовать внутреннее кэширование ESLint или другого демона ESLint. Здесь вы можете найти очень полезные советы, см. пост на StackOverflow.

Prettier существует только для Javascript?

Prettier официально поддерживает несколько других языков. К ним относятся PHP, Ruby, Swift и так далее. Кроме того, существуют плагины сообщества для таких языков как Java, Kotlin, Svelte и многих других.

Как насчет ESLint v7?

Все примеры в нашей статье изначально были основаны на версии ESLint v6, но недавно была выпущена версия ESLint v7. Не волнуйтесь, даже в версии 7 ESLint работает без каких-либо изменений. Если вас интересует, что было изменено или добавлено, вы можете ознакомиться с примечаниями к выпуску ESLint v7.

How to use Prettier in VS Code

This tutorial is part 1 of 3 in this series.

A brief step by step tutorial on how to install and use Prettier in VS Code (Visual Studio Code). Prettier is an opinionated code formatter which ensures one unified code format. It can be used in VS Code by installing it from the VS Code Marketplace. Once you have integrated it in VS Code, you can configure Prettier to format your files when saving them or committing them to a version control system (e.g. Git). This way, you never need to worry about your source code formatting, because Prettier takes care about it. It works for personal projects but also streamlines projects when working with a team of developers.

We will start by installing the Prettier extension for VS Code. Once you have installed it, you can use it with CTRL + CMD + P (MacOS) or CTRL + Shift + P (Windows) to manually format a file or a selection of code.

If you don’t want to format your file with the given shortcut manually every time, you can format it on save as well. Therefore you need to open your VS Code user’s settings/preferences as JSON and enter the following configuration:

Afterward, a JavaScript file should format automatically once you save it. Now you don’t need to worry about your code formatting anymore, because Prettier takes care of it. Prettier comes with a few options which you can apply globally too; which I like to do for my personal projects:

After setting up this configuration, Prettier makes sure that only single quotes are used and that the line length is set to the given number of characters.

However, be aware that this applies to every project now. If you happen to work on a project with a team where the project does not use Prettier, you will format every file once you save it. If not agreed upon with your team mates, this may cause trouble. Therefore I recommend the installation of Prettier Formatting Toggle which allows you to toggle of Prettier globally in a project.

Furthermore, if a project you are working on uses a local .prettierrc file for a local configuration, it can be used to override the global settings. That’s what I’d recommend when working with multiple developers in a team on a project:

This tutorial is part 1 of 3 in this series.

Автоматическое форматирование кода (JavaScript) с помощью Prettier и ESLint

13 февраля 2017 г. // @ yenbekbay // время чтения: 2 минуты

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

Относительно недавно на сцене появился концептуально новый инструмент для форматирования JavaScript под названием Prettier. В отличие от других существующих форматтеров, Prettier не опирается на изначальный стиль кода, вместо этого печатая полученное из кода АСД в одном постоянном формате. 👏

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

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

§ Использование с ESLint

Для работы с JavaScript, мы в Anvilabs используем ESLint с нашей собственной конфигурацией на основе стайлгайда от Airbnb.

С появлением Prettier в нашем инструментарии, большое количество стилистических правил в конфигурации стало ненужными. В конце концов, зачем беспокоиться о стиле, если Prettier потом всё сам отформатирует за тебя? 🙂 Чтобы решить эту проблему, мы добавили в нашу конфигурацию поддержку eslint-config-prettier, который отключает все правила, каким-то образом конфликтующие с Prettier.

§ Автоформатирование при сохранении в VSCode

Убедитесь, что у вас установлено дополнение VSCode ESLint.

Введите следующее в файл settings.json :

§ Форматирование всех изменённых файлов в коммите

Теперь каждый раз, когда вы или ваши коллеги будете выполнять коммит, lint-staged определит список изменённых JavaScript файлов и отформатирует их с помощью Prettier.

§ Заключение

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

С любыми вопросами или комментариями по статье, пишите мне в Твиттере.

bySabi Files

forked extension for use Semistandard integrate to prettier-eslint

Prettier formatter for Visual Studio Code

VS Code package to format your Javascript / Typescript / CSS using Prettier.

Installation

Can also be installed using

Usage

Using Command Palette (CMD + Shift + P)

Format On Save

Respects editor.formatOnSave setting.

Settings

Use prettier-eslint instead of prettier. Other settings will only be fallbacks in case they could not be inferred from eslint rules.

prettier.printWidth (default: 80)

Fit code within this line limit

prettier.tabWidth (default: 2)

Number of spaces it should use per tab

prettier.singleQuote (default: false)

If true, will use single instead of double quotes

prettier.trailingComma (default: ‘none’)

Controls the printing of trailing commas wherever possible. Valid options:

prettier.bracketSpacing (default: true)

Controls the printing of spaces inside object literals

prettier.jsxBracketSameLine (default: false)

If true, puts the > of a multi-line jsx element at the end of the last line instead of being alone on the next line

Which parser to use. Valid options are ‘flow’ and ‘babylon’.

prettier.semi (default: true)

Whether to add a semicolon at the end of every line (semi: true), or only at the beginning of lines that may introduce ASI failures (semi: false)

prettier.useTabs (default: false)

If true, indent lines with tabs

prettier.javascriptEnable (default: [«javascript», «javascriptreact»])

Advanced feature. Use this to opt in / out prettier on various language ids. Restart required. Use parser babylon or flow depending on prettier.parser for given language ids. Use with care.

prettier.typescriptEnable (default: [«typescript», «typescriptreact»])

Advanced feature. Use this to opt in / out prettier on various language ids. Restart required. Use parser typescript for given language ids. Use with care.

prettier.cssEnable (default: [«css», «less», «scss»])

Advanced feature. Use this to opt in / out prettier on various language ids. Restart required. Use parser postcss for given language ids. Use with care.

prettier.jsonEnable (default: [«json»])

Advanced feature. Use this to opt in / out prettier on various language ids. Restart required. Use parser json for given language ids. Use with care.

prettier.graphqlEnable (default: [«graphql»])

Advanced feature. Use this to opt in / out prettier on various language ids. Restart required. Use parser graphql for given language ids. Use with care.

Prettier resolution

This extension will use prettier from your project’s local dependencies. Should prettier not be installed locally with your project’s dependencies, a copy will be bundled with the extension.

Contribute

This is my first Visual Studio Extension so I probably made some terrible choices. Feel free to open issue or PRs!

Настраиваем stylelint по код гайду Standart (AirBnB), вместе с Prettier, Husky и lint-staged

Stylelint — это гибкий инструмент для линтинга стилей, который не только отлавливает ошибки, но и помогает соблюдать соглашения по стилю кода и применяемым практикам.

В этой статье я расскажу, как настроить:

Конфиг stylelint

Установим все необходимые пакеты:

Что делает каждый из плагинов:

Настраиваем VS Code

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

Команды для запуска

Для запуска линтинга всех файлов в проекте добавим новые скрипты в package.json :

Команда npm run stylelint запустит линтер и выведет в консоль список ошибок, а npm run stylelint:fix дополнительно исправит ошибки, доступные для автоисправления.

Настраиваем Husky и lint-staged

Также настроим Git-хук на запуск линтера только для изменённых файлов при создании коммита. Для этого установим Husky и lint-staged:

И добавим настройки для этих плагинов в package.json :

Заключение

Вот такая базовая настройка stylelint и VS Code поможет достичь большей консистентности кодовой базы и значительно сократит время на обсуждение форматирования стилей на код ревью. Посмотреть приложение с настроенным stylelint вы можете на Github.

Installing Prettier on VSCode

I would like to use Prettier to format my code ‘on save’ but I am struggling to set it up.

Here are the steps I’ve taken:

installed Prettier as VS Code extension.

In VSCode I went to file > preferences > settings: then searched for «Format On Save» and made sure that option was checked.

I understand that I now need to go to Visual Studio Code’s ‘User’s settings/preferences’ as JSON and put in the following configuration:

The problem is, I can’t find the «User’s settings/preferences»?

If I go to ‘file > preferences > settings’ I don’t see anywhere which will allow me to input java.

1 Answer 1

Install Prettier

Enable formatting on save for all files

Open the settings menu via «File > Preferences > Settings». Type editor.formatonsave into the search bar and enable the «Format On Save» setting. Now, whenever you save any file it should be formatted automatically.

Enable formatting on save for only certain file types

Bastian Kistner

Prettier formatter for Visual Studio Code with tabs support

VS Code package to format your Javascript using Prettier. Based on Esben Petersen’s extension

Installation

Can also be installed using

Usage

Using Command Palette (CMD + Shift + P)

Format On Save

Respects editor.formatOnSave setting.

Settings

printWidth (default: 120)

Fit code within this line limit

tabWidth (default: 4)

Number of spaces it should use per tab

useFlowParser (default: false)

Use the flow parser instead of babylon. Deprecated use parser: ‘flow’ instead

singleQuote (default: true)

If true, will use single instead of double quotes

trailingComma (default: ‘es5’)

Controls the printing of trailing commas wherever possible. Valid options:

bracketSpacing (default: true)

Controls the printing of spaces inside object literals

jsxBracketSameLine (default: false)

If true, puts the > of a multi-line jsx element at the end of the last line instead of being alone on the next line

parser (default: ‘babylon’)

Which parser to use. Valid options are ‘flow’ and ‘babylon’

useTabs (default: ‘true’)

Use tabs instead of spaces

Contribute

This is my first Visual Studio Extension so I probably made some terrible choices. Feel free to open issue or PRs!

Расширение «ESLint» для VS Code, часть 1 из 2

Поскольку JavaScript — это интерпретируемый язык, ошибки, допущенные в коде, выявляются во время его выполнения. Чтобы увидеть ошибки до запуска кода, используется инструмент, который называется линтер. Для поиска ошибок применяется статический анализ кода и используются особые правила.

Файл конфигурации eslint

Перед установкой расширения «ESLint» устанавливаем пакет eslint — локально (рекомендуется) или глобально (не рекомендуется). Расширение будет сначала искать локальный пакет, а в случае неудачи — глобальный.

После установки расширения создаем файл конфигурации с правилами проверки кода:

Рекомендуемый набор правил eslint:recommended выгллядит следующим образом:

Давайте добавим в файл конфигурации еще несколько правил:

Файл конфигурации VS Code

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

Проблема в том, что такая конфигурация толком не работает — расширения «ESLint» и «Prettier» для VS Code мешают друг другу.

Можно форматировать ( Alt+Shift+F ) с использованием «Prettier». И можно исправить ошибки при сохранении ( Ctrl+S ) с использованием «ESLint». Возможно, причина этого в том, что VS Code активно развивается, постоянно добавляются новые возможности — и это просто временный баг, который пропадет при очередном обновлении.

ESLint и Prettier вместе, первый способ

После форматирования с использованием prettier ( Alt+Shift+F ) — получим множество сообщений «Missing semicolon» от eslint :

Цвет волнистой линии для подчеркивания можно задать в настройках VS Code settings.json

Набор правил Standard

Кроме набора правил eslint:recommended есть еще несколько популярных наборов — Standard, Airbnb, Google и другие. Давайте для примера посмотрим, как использовать правила Standard — этот набор гораздо больше eslint:recommended и предупреждений об ошибках будет больше.

Настройка plugin:prettier/recommended на самом деле делает следующее:

Особенности конфигурации

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

Еще запутаннее, когда имена плагинов начинаются с @ (пространство имен). Нужно учитывать, что @foo и @foo/bar находятся в одном пространстве имен, но это два разных плагина (npm-модуля). Два фрагмента ниже из файла конфигурации эквивалентны.

И еще один важный момент — когда в extends используется префикс plugin :

Это значит, что плагин eslint-plugin-foo содержит в себе набор правил bar :

Почему Prettier не форматирует код в VS Code?

В моем приложении Nuxt, где установлены и включены ESlint и Prettier, я переключился на Visual Studio Code.

Когда я открываю файл .vue, нажимаю CMD + Shift + P и выбираю Форматировать документ, мой файл вообще не получает отформатированный.

Мой .prettierrcнастройки:

У меня так много строк исходного кода, что я не могу их форматировать вручную. Что я делаю неправильно?

Также есть проблема для v1.27.2 с примечанием, что такая же конфигурация работала для v.1.23

Действительно, у меня VSCode 1.27.2

Если у вас ничего не работает, обязательно ознакомьтесь с моим ответом: stackoverflow.com/a/64273353/4298115

prettier.disableLanguages (default: [«vue»])

A list of languages IDs to disable this extension on. Restart required. Note: Disabling a language enabled in a parent folder will prevent formatting instead of letting any other formatter to run

Иногда prettier перестает работать, когда в коде есть синтаксические ошибки. Вы можете просмотреть ошибки, нажав кнопку Икс в правом нижнем углу рядом с Красивее.

Большое спасибо! Мне потребовалось два часа, чтобы безрезультатно разобраться, пока я не увидел ваш ответ. Что-то такое простое.

Вы спасли мою жизнь. Я забыл поставить точку перед файлом конфигурации, поэтому по умолчанию он использовал конфигурацию VS Code.

Я не вижу prettier справа внизу. У меня «editor.defaultFormatter»: «esbenp.prettier-vscode», и установил доп. Хочу формат PowerShell.

вы можете попробовать добавить этот раздел в свой файл VS Code settings.json?

Так было и со мной. Форматировщик по умолчанию был установлен на правильный, форматирование при сохранении было отключено.

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

Отметьте этот путь, если здесь есть файлы или папка пуста

Если отсутствует удалить и переустановить красивее

Prettier также может форматировать ваши файлы при сохранении.

Однако установка и включение не приводят к работе.

Вы должны проверить «форматировать при сохранении» в VSCode: Настройка >> Пользователь >> Текстовый редактор >> Форматирование

также alt (command) + shift + f предназначен для форматирования без сохранения.

Обратите внимание, что помимо включения «Форматировать при сохранении» вам также часто необходимо указывать средство форматирования по умолчанию.

Следуя каждому решению сверху, он работал на этом этапе :), большое спасибо

Как я разобрался после огромного разочарования из-за того, что Prettier перестал работать в VSCode.

Это волшебным образом решило мою проблему.

Я настроил Prettier как стандартное средство форматирования в настройках, но он просто не работал. Это сработало. Сделал мой день!

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

Когда я выбираю средство форматирования по умолчанию как Prettier, оно форматирует этот файл, но после этого не работает при сохранении. У меня есть опция сохранения, но все же. Мне приходилось снова и снова выбирать форматтер по умолчанию. Любое решение

@HimanshuTariyal Это должно сработать для вас, но не стесняйтесь проверить мое решение: stackoverflow.com/a/64273353/4298115

Это какая-то проблема в vscode? Это сработало и для меня

А как насчет того, чтобы сделать красивее И eslint внести изменения в код?

@jrypkahauer, это в основном мой ответ. ☺️

Откатился красивее на 1.7.3 и поправил

Я не использую Vue, но возникла та же проблема.

У меня уже были настройки

Решение моей проблемы заключалось в том, что я все настроил правильно, за исключением того, что мне нужно было:

Если у вас уже есть конфигурация ESlint, вам, вероятно, следует использовать Prettier через ESlint. Вот мой ответ о том, как этого добиться.

Для меня это было связано с ESlint, который также работает с Prettier. Eslint не работал (локальная установка против глобального конфликта установки), что сломало Prettier.

Как решить это. У меня проблема, когда Eslint запрашивает новую строку при нажатии клавиши ввода и сохранения, она возвращается в ту же позицию, и снова начинает появляться ошибка.

Если выполнение того, что упомянул @Simin Maleki, не решит эту проблему для вас, есть вероятность, что ваш модуль форматирования по умолчанию не установлен:

ПОШАГОВАЯ ПРОГУЛКА

Также убедитесь, что ваш формат при сохранении включен:

На месте должен быть ответ

Случайно мой vscode перестает работать с красивее после нескольких месяцев правильной работы, не знаю, почему это исправляет: молитесь:

@ncubica Точно такая же вещь произошла со мной, и я был очень сбит с толку, так как не сделал ничего, чтобы вызвать проблему. Пришлось немного покопаться, но, наконец, нашел это и пришлось поделиться. Рад, что у вас работает 🙂

@Antonio Без проблем, рад, что смог помочь!

Я сделал это, а также попробовал решение от @miha, но безрезультатно. Наконец удалил / переустановил, и это сработало

Для того, чтобы это работало, потребовалась пара подводных камней: 1. Remote необходимо настроить для более красивой работы, если вы используете эти функции, и 2. Мне пришлось перезапустить vscode, чтобы это сработало.

Jason R Stevens CFA

Не забудьте включить «editor.defaultFormatter» в настройках VSCode. В моем случае он был нулевым, и, следовательно, даже «editor.formatOnSave», похоже, не решал проблему.

Что это добавляет к остальным 4 ответам, в которых упоминается то же самое?

Я столкнулся с этой проблемой, и эти три шага решили мою проблему:

Спасибо, не нашел такого в море вариантов.

Мы можем открыть файл ниже, используя:

Спасибо. Принятое решение сработало для меня. Но, возможно, ваш отзыв поможет другим. Спасибо, что поделились информацией

@BillalBegueradj Правда, у меня не сработало принятое, и я потратил около 1 часа, поэтому опубликовал этот. Возможно, это более новая проблема, с которой мы столкнемся в 2020 году.

Manohar Reddy Poreddy

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

Manohar Reddy Poreddy

Как добавить в macos?

Manohar Reddy Poreddy

Когда я щелкнул по этой ссылке, появилось сообщение об ошибке:

Оказалось, что у меня тоже установлен Prettier Now. В моем файле конфигурации это логическое значение. После удаления Prettier Now все работает нормально.

если не работает, закройте и снова откройте редактор vscode

Для меня проблема заключалась в файлах HTML, форматирование которых однажды перестало работать. У меня был настроен Форматировать при сохранении, который работал во всех файлах, кроме HTML.

Затем я понял, что экспериментально установил Форматировать в режиме сохранения на modification вместо file и забыл об этом. Это привело к тому, что в файлах HTML ничего не отформатировалось, что удивительно даже с моими изменениями. Установка обратно на file решила проблему.

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

При нажатии на этот статус панель вывода должна сообщить о проблеме в файле HTML. Для меня проблема заключалась в том, что у меня был div внутри тега p, против которого, как я полагаю, выступают соглашения prettier / VSCode. Когда я удалил его (и в сочетании со всеми вышеперечисленными настройками, а именно средство форматирования по умолчанию и форматировать при сохранении), я стал красивее работать.

.prettierrc не требуется, если вы не хотите переопределить настройки VSCode.

Спасибо, ты спас мне день.

Это был мой случай! Большое спасибо.

В моем случае мне пришлось сделать следующее:

и вуаля, все заработало.

КОНЧИК: Чтобы убедиться, что установка прошла успешно, я проверил версию:

Это сработало для меня. У меня уже был установлен prettier глобально, но он не работал. Если бы мне пришлось угадывать, это могла быть проблема WSL.

Я попытался включить «Форматирование при сохранении» и установить «Задержку автосохранения» на 0. Это сработало, так что я думаю, вы тоже можете попробовать это.

Обновлено: вы можете увидеть их, выполнив следующие действия.

удалите это правило, и оно должно работать

Если Prettier автоматически форматирует все остальные файлы, кроме файлов HTML, при сохранении:

В некоторых случаях, когда prettier предоставляется в качестве зависимости, вам может потребоваться установить его до того, как prettier vscode распознает его с помощью одной из следующих команд, в зависимости от используемого вами диспетчера пакетов npm i или yarn

отключить и включить расширение prettier решает мою проблему

Если все остальные конфигурации верны, это поможет.

Похоже, моя проблема была вызвана обновлением моей версии node. Это устранило проблему.

У меня тоже сработало использование Developer: Reload Window из палитры команд.

Это то, что сработало для меня (мой форматировщик по умолчанию уже был настроен на Prettier)

Huu Phong Nguyen

Как отформатировать код через плагин VScode ESlint

Хорошо, вместо того, чтобы давать руководство по использованию Расширение VScode Prettier, я лучше объясню, как полагаться на ESlint и иметь оба мира: проверка правильности вашего кода (ESlint), а затем его форматирование (Prettier).

В чем преимущества этого?

Как добиться такой настройки?

Начнем сначала с установки Расширение ESlint и только его, НЕ НАДО установим Prettier.

Еще не установлен Ветур?

Там у вас должно получиться что-то вроде этого

Как убедиться, что ваша конфигурация теперь работает?

PS: если вы хотите иметь встроенные предупреждения / ошибки ESlint, как на скриншоте, вы можете установить Линза ошибки, это потрясающее расширение, если вы хотите избавиться от ошибок.

Сохраните этот файл, и вы должны увидеть, что все автоматически исправляемые вещи сделаны за вас. Обычно это в основном проблемы с Prettier, но иногда это также может быть ESlint. Поскольку у нас есть правила ESlint от Nuxt, вы также получите несколько хороших практик прямо из коробки!

Тада, работает! Если нет, прочтите раздел в конце моего ответа.

Если вы хотите создать новый проект

Вы можете запустить npx create-nuxt-app my-super-awesome-project и выбрать там несколько вещей, наиболее важным из которых, конечно же, является Linting tools: Eslint + Prettier (нажмите пробел, чтобы выбрать одну из них).

Предупреждение: на сегодняшний день необходимо сделать дополнительный шаг, чтобы ESlint + Prettier работал правильно, как показано в этом Проблема с Github. Исправление должно быть выпущено довольно скоро, тогда приведенная ниже конфигурация больше не понадобится!

Затем вы можете заставить его работать нормально, как указано выше. Сохраните файл, и он должен запустить ESlint, а затем Prettier один за другим!

Config Eslint and Prettier in Visual Studio Code for React js development

I have come with a tutorial that covers the configuration of Eslint and Prettier in visual studio code for React js development. Errors are a major problem in our usual react js development. This frustrates users while writing code.

When I started using react for my projects I never used eslint or prettier for the development. I still regret that because linting is important for development as it reduces error and improves the overall quality of the code and prettier helps us formatting our code. So let us see how to configure that for your next react js project.

It’s time to add prettier and configure it with our Visual Studio Code so whenever we save our code it will automatically format our code.

3. Run the below command to install the required plugins for the prettier setup.

4. Now we need to configure our VSCode settings for prettier to work on autosave. Follow the below-mentioned steps to configure your VScode Setting

So now whenever you save your code or change the focus from the code, VSCode will automatically fix the format of your code.

Below I have also shared the GitHub repository and live code for reference.

How to properly set up Nuxt with ESLint and Prettier in VSCode

Writing tech tutorials is hard because certain configurations might stop working after several months. As I’m also working on other things I don’t always have time to check if this is still working. However, if this tutorial doesn’t work for you anymore, please let me know ASAP! I really don’t want to waste your time doing something that doesn’t work anymore.

With JavaScript being a dynamic and loosely-typed programming language problems and errors can potentially stay undetected for a very long time. To analyze code and to find errors, JavaScript applications are typically executed. This however, is a complete waste of processing power and hinders a fast development process.

As an alternative, static analysis tools can be used. One very common tool is “ESLint”, more specifically, it is a linting tool. Linting is defined as a type of static analysis that can be utilized to detect problematic code patterns or to enforce code style guidelines. This allows programmers to detect potential problems without executing the code. What is more, ESLint is a highly flexible and configurable in which every aspect can be adapted to fit a project’s needs. Configuring ESLint is not that hard, integrating custom rules, code formatting and properly setting up error highlighting is. This article aims to help developers who are using Nuxt and Visual Studio Code to set-up linting and code formatting.

Setting up linting and formatting requires 3 steps:

1. Installing dev dependencies

To install the development dependencies we issue the following command inside the root directory of our project:

This adds eslint (linting, error messages, etc.), babel-eslint (so we can use ES6+ features, flow types, etc.), eslint-config-prettier (special config for prettier so it will not interfere with other eslint formatting rules), eslint-plugin-prettier (runs prettier as an eslint rule so wrong formatting is seen as an error), prettier itself (to properly format code) and eslint-plugin-vue (adds vue support to eslint, e.g v-model cannot be used on a div element).

2. Installing VSCode extensions

The next step is to install some extensions, to enable error highlighting and automatic fixes. This step is fairly straightforward, we just need to install two extensions for VSCode:

UPDATE: VSCode changed the settings and it is now easier than ever to get prettier + eslint to work. The snippet below has been updated to reflect these changes.

An important note here: please do yourself a favor by adding the following snippet to your workspace settings, not your global VSCode settings. This will create an additional file in your project structure, which can be tracked with git and therefore shared between developers.

3. Configuring ESLint and Prettier

In the extends array ESLint is instructed to use the plugins we installed as dependencies earlier. As these four lines are probably the most important part of this article I will further elaborate:

4. Roundup

By now your files should be nice and tidy when hitting save and errors should be highlighted as soon as your fingers hit the keys. The system we put in place should now look somewhat like this:

We’ve got the plugins for ESLint to integrate Prettier and Vue rules. Babel-eslint serves as the parser which allows us to write ES6+ code and still get linting capabilities. And we have the ESLint VSCode extension which tells the Vetur Extension which errors to highlight and then actually highlights them.

That’s it! It took me a lot of time to properly understand how to integrate ESLint together with Prettier as the documentation of Nuxt and Vue don’t quite touch these topics in depth. Also some other ESLint tutorials which were specifically written for Nuxt or Vue seem half-baked and I feel like some of the authors didn’t even bother to properly read the documentation of each tool leading to unnecessary dependencies and weird formatting.

prettier / prettier-vscode Goto Github PK

Visual Studio Code extension for Prettier

License: MIT License

TypeScript 88.40% JavaScript 8.47% CSS 0.07% HTML 0.55% PHP 0.57% Vue 0.09% SCSS 0.30% Shell 0.07% Dockerfile 1.20% Handlebars 0.28% formatter typescript visual-studio-code visual-studio-code-extension

prettier-vscode’s Introduction

Prettier Formatter for Visual Studio Code

Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.

JavaScript · TypeScript · Flow · JSX · JSON
CSS · SCSS · Less
HTML · Vue · Angular HANDLEBARS · Ember · Glimmer
GraphQL · Markdown · YAML
Your favorite language?

Can also be installed in VS Code: Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.

To ensure that this extension is used over other extensions you may have installed, be sure to set it as the default formatter in your VS Code settings. This setting can be set for all languages or by a specific language.

The following will use Prettier for all languages except Javascript.

The following will use Prettier for only Javascript.

Additionally, you can disable format on save for specific languages if you don’t want them to be automatically formatted.

This extension will use prettier from your project’s local dependencies (recommended). When the prettier.resolveGlobalModules is set to true the extension can also attempt to resolve global modules. Should prettier not be installed locally with your project’s dependencies or globally on the machine, the version of prettier that is bundled with the extension will be used.

To install prettier in your project and pin its version as recommended, run:

NOTE: You will be prompted to confirm that you want the extension to load a Prettier module. This is done to ensure that you are not loading a module or script that is not trusted.

Configuring Default Options

Visual Studio Code Settings

You can use VS Code settings to configure prettier. Settings will be read from (listed by priority):

Using Command Palette (CMD/CTRL + Shift + P)

Visual Studio Code provides default keyboard shortcuts for code formatting. You can learn about these for each platform in the VS Code documentation.

If you don’t like the defaults, you can rebind editor.action.formatDocument and editor.action.formatSelection in the keyboard shortcuts menu of vscode.

Respects editor.formatOnSave setting.

You can turn on format-on-save on a per-language basis by scoping the setting:

Format selection works on several languages depending on what Prettier itself supports. The following languages currently are supported:

Format Document (Forced)

The recommended way of integrating with linters is to let Prettier do the formatting and configure the linter to not deal with formatting rules. You can find instructions on how to configure each linter on the Prettier docs site. You can then use each of the linting extensions as you normally would. For details refer to the Prettier documentation.

All prettier options can be configured directly in this extension. These settings are used as a fallback when no configuration file is present in your project, see the configuration section of this document for more details. For reference on the options see the prettier documentation.

The default values of these configurations are always to their Prettier 2.0 defaults. In order to use defaults from earlier versions of prettier you must set them manually using your VS Code settings or local project configurations.

These settings are specific to VS Code and need to be set in the VS Code settings file. See the documentation for how to do that.

prettier.enable (default: true )

Controls whether prettier is enabled or not. You must restart VS Code when you change this setting.

prettier.requireConfig (default: false )

Note, if this is set, this value will always be used and local ignore files will be ignored.

Disabled on untrusted workspaces

Supply a custom path to the prettier configuration file.

Note, if this is set, this value will always be used and local configuration files will be ignored. A better option for global defaults is to put a

/.prettierrc file in your home directory.

Disabled on untrusted workspaces

prettier.resolveGlobalModules (default: false )

When enabled, this extension will attempt to use global npm or yarn modules if local modules cannot be resolved.

NOTE: This setting can have a negative performance impact, particularly on Windows when you have attached network drives. Only enable this if you must use global modules. It is recommended that you always use local modules when possible.

Note: Disabling a language enabled in a parent folder will prevent formatting instead of letting any other formatter to run

Disabled on untrusted workspaces

A list of glob patterns to register Prettier formatter. Typically these will be in the format of **/*.abc to tell this extension to register itself as the formatter for all files with the abc extension. This feature can be useful when you have overrides set in your config file to map custom extensions to a parser.

Disabled on untrusted workspaces

prettier.useEditorConfig (default: true )

Disabled on untrusted workspaces (always false)

prettier.withNodeModules (default: false )

Whether or not to process files in the node_modules folder.

Disabled on untrusted workspaces

Failed to load module. If you have prettier or plugins referenced in package.json, ensure you have run npm install

Your project is configured to use an outdated version of prettier that cannot be used by this extension. Upgrade to the latest version of prettier.

You must upgrade to a newer version of prettier.

This workspace is not trusted. Using the bundled version of prettier.

You must trust this workspace to use plugins and local/global modules. See: Workspace Trust

Getting Prettier, Eslint and Vscode to work together

For quite a while I’ve tried getting Prettier, Eslint and Vscode to work together, but never found a solution that satisfied me. Now, as I’m working on a new React project in my day job, I finally found some time to make it work.

Wait what are Eslint and Prettier?

Eslint is a javascript linter that can help you find syntax or other errors. Eslint can be extended by plugging in pre-defined configs or completely configuring it yourself. Paired with the plugin for vscode, it can show you errors as you type.

Prettier is a code formatter for quite a few languages, including javascript. You can have code being automatically or optionally formatted with it.

Prerequisites

I assume you have basic knowledge about NPM and Vscode, as I won’t cover it here. You need to have:

Install Vscode plugins

Install dependencies

Exit fullscreen mode

Setup the config files

In here we basically tell Eslint to:

Exit fullscreen mode

Note: Your eslint config can include many more rules. I’m keeping it simple and easy to grasp.

You can tweak these settings, or add new ones as you like:

Exit fullscreen mode

Enable formatOnSave in Vscode

Look for formatOnSave and check the checkbox, or add this line to settings.json :

Exit fullscreen mode

Try it out

If you’re having trouble try restarting Vscode.

VSCode Setup with ESLint and Prettier

Hi, I’m Brittney and I’m an instructor over at ZTM Academy and the owner, designer, and developer at bDesigned. You can find more dev notes by me at Console Logs.

Visual Studio Code

Visual Studio Code (aka VS Code) is a code editor for all platforms that is free and open source. There are several decent code editors out there, such as Atom, Sublime, and Notepad++, but VS Code has quickly become the standard for software development. With its cross-platform support, built-in Git source control, integrated terminal, an extensive library of extensions, plugins for nearly every programming language, and so much more, it has everything you need to start writing programs.

I was having some issues with my formatting and decided it was a good time to reset VS Code and do an install from scratch. Here’s a great SO post on it: Remove VS Code Settings. To reset everything in VS Code go to Users/ /AppData/Roaming/Code and delete the whole folder after VS Code is uninstalled.

Installing VS Code

ESLint

Exit fullscreen mode

Prettier

Prettier is a code formatter. It will parse your code and change it to match its own set of rules. You can do this on save with format on save or by using the shortcut Shift + Alt + F on Windows or Shift + Options+ F on Mac or Ctrl + Shift + I on Linux. Get Prettier here or search the extension tab for Prettier in VS Code.

Create React App with ESLint

Exit fullscreen mode

When this is finished, we need to override some Airbnb rules by adding to .eslintrc.json and update the extends to include Prettier.

Exit fullscreen mode

Extensions

There are many extensions available for VS Code. You will probably want to add ones for frequently used programming languages and the rest are personal preference. I work in JavaScript, React, Svelte, and Python mostly. These are the all of the extensions I use:

Exit fullscreen mode

You can generate that list with one of these commands:

Exit fullscreen mode

Themes

Exit fullscreen mode

Fonts

Another feature of VS Code is custom fonts. You can download and install any font to your system. Once installed, you can go into settings.json and add these lines.

Exit fullscreen mode

Font family will be whatever font you want to use. Victor Mono is my favorite! Ligatures in typography is when 2 or 3 characters are joined together to make them look as if they were one.

Prettier not formatting HTML files in VS Code

Prettier extension on my VS code is unable to format HTML.

VS Code version (from About VS code section) :

Please let me know how to get this issue fixed. Please leave a comment if any more info is needed. Thanks.

20 Answers 20

Trending sort

Trending sort is based off of the default sorting method — by highest score — but it boosts votes that have happened recently, helping to surface more up-to-date answers.

It falls back to sorting by highest score if no posts are trending.

Switch to Trending sort

Same for me. I managed to solve it as follow:

This allowed me to use prettier globally and use built in html formatter for html. Also allowed the formatting to happen on save and while typing.

The part responsible for Prettier formatting html

I got the same issue, the cause can be updating the VS Code. fixed it by setting the Default Formatter of Text Editor

Go to Settings ( Ctrl+, for windows), search for ‘Default Formatter’

Set the formatter in dropdown (esbenp.prettier-vscode) for prettier. this can change if you are using any other formatter.

Firstly, you may want to solve the compilation error you have in regards to Vue.js. You may need to grab some extensions for VS-code as detailed here.

I have heard that Prettier has some issues formatting HTML at times, and VS Code itself already has HTML formatting support. You can stop prettier from formatting HTML specifically using the following command:

You could also change this line in your configs to enable VS code html language support instead.

Hope that helps!

Short Answer:

Long Answer: Most of the times the reason why Prettier doesn’t work is that you have a markup error.

ex: you haven’t close the angle braces or you close the tag more that one time to know the error and fix it : look at short answer.

For me i found that prettier was refusing to format files, however there was no errors in the output window in vs code. usually this happens when the html is not valid: missing tags, or tags closed twice, or tags that are not closed.

To see the errors, i ran prettier from the command line, and for each file it refused to format, it showed an error of what was wrong, like in the image below:

Had this problem crop up today after working fine with HTML previously.

Tried editing default formatter, format on save, reloading prettier etc.

Eventually tried the solution proposed above

make sure «[html]»: has default formatter line set to the below, found it on line 40.

If the formatting fails, see if there are any errors in the Prettier console. If not, use the following settings:

Once the file has been formatted, put back the original settings:

And try formatting again. This time Prettier will have better input to work with.

I had a lot of problems with getting Prettier to format on save. It turned out to be an issue with the default timeout settings in VSCode. Using these settings finally worked for me:

For reference, here are all my settings concerning linting and formatting:

I use the following extensions (again limited to linting/formatting):

You might want to make sure that all the npm packages needed by your extensions are installed. Locally if possible.

I sincerely hope this helps. Setting up linters and formatters is still a science in its own right.

Travis Horn

Prettier is an opinionated code formatter. It is fundamentally different than a style linter. Prettier doesn’t care how you write your JavaScript. It simply comes in after you’re done and formats all your code in a standard way.

I posted a very similar tutorial on how to set up ESLint on VS Code with Airbnb JavaScript Style Guide. Many people found it useful. I figured I’d do something similar with Prettier.

Some may find it useful to install a linting configuration that obeys Prettier’s recommended rules so they can write code in the style that Prettier already expects. Following these rules will ensure your code has a level of clarity that makes reading and maintaining your code easier for anyone who has to work on it. For the linting step, you can use ESLint, which is a tool for “linting” your code. It can analyze your code and warn you of potential errors. In order for it to work, you need to configure it with specific rules. Luckily, Prettier provides an ESLint configuration that anyone can use.

VS Code is a popular code editor created by Microsoft. One of the nice features is that you can enabled extensions that make your life as a developer easier. There are extension for Prettier and ESLint which will integrate their formatting and linting features right in your editor. You will be warned of potential problems on the fly as you write code and you can auto-format your code on save.

Many developers consider setting up linting in this way essential. In this post, I’ll show you how to set it all up.

The concise version

In VS Code, Ctrl + Shift + X

Search and install ESLint

Search and install Prettier Code formatter

Restart VS Code

Follow along with the detailed version below if you are new to any of the concepts above or just want to get a better understanding of what these steps do.

The detailed version

First, download and install Node.js. Its package manager, npm, is included with the installation.

Once Node and npm are installed, open up a terminal (or command prompt). Change directories into the root directory for any coding you do. I call my directory “code”.

This is the directory in which I want to configure ESLint. Any subdirectories within this one will also use the configuration we are about to set up. This works because when you run ESLint, it looks in the current directory for a configuration; If it can’t find one, it moves up to the parent directory, checks there, and the process repeats until a configuration is found.

Now initialize a new npm configuration.

Install and save the necessary packages for Prettier, ESLint and the Prettier ESLint configuration.

Prettier and ESLint are now installed and configured. Now we need to get it working in VS Code.

Download and install VS Code.

Open it and press Ctrl + Shift + X to open the Extensions panel.

Type ESLint in the search bar. Find the ESLint extension in the search results and click the green Install button next to it.

Go ahead and close VS Code and then re-open it.

To automatically fix the problems it finds, press Shift+Alt+F. You can also set editor.formatOnSave to true in your user or workspace settings to format your code automatically every time you save.

ESLint warns on hover. Prettier fixes on Shift+Alt+F

How to make VS Code work with ESLint, TypeScript and Prettier

This blog post shows you how to setup VS Code with TypeScript, Prettier and ESLint.

What are they?

VS Code (aka Visual Studio Code or just ‘Code’) is an open source IDE from Microsoft. https://code.visualstudio.com/

TypeScript is a programming language which adds type safety to JavaScript. It compiles to JavaScript for use in browsers and on servers. https://www.typescriptlang.org/

Prettier is a formatter for many web focused languages (including TypeScript) and let’s you know when you’ve broken a stylistic rule. https://prettier.io/

ESLint is a linter for TypeScript and JavaScript that understands these languages and let’s you know when you’ve broken a syntactical rule. https://eslint.org/

What’s the goal here?

The goal is to have a performant and user friendly development environment that can:

Setting up VS Code and TypeScript

VS Code has first class support for TypeScript so this is straightforward.

Setting up Prettier

Setting up ES Lint

ES Lint and Prettier have some similar features so we are going to need some extra config here to ensure they don’t conflict with each other.

If you are wondering why we’re using ESLint and not TSLint — read this.

You are all done!

These tools change all the time, so if something isn’t working please reach out to us via our website so we can help 🙂

At App Sapiens we use TypeScript every day to deliver these benefits to our customers. If you would like to find out more about how to increase speed without cutting corners on your project, please reach out via our website.

Отформатируйте свой код с помощью Prettier

Введение в Prettier

Он поддерживает множество различных синтаксисов из коробки, в том числе:

и сплагинывы можете использовать его для Python, PHP, Swift, Ruby, Java и других.

Он интегрируется с самыми популярными редакторами кода, включая VS Code, Sublime Text, Atom и другие.

Prettier очень популярен, так как в феврале 2018 года его скачали более 3,5 миллионов раз.

Наиболее важные ссылки, по которым вам нужно узнать больше о Prettier:

Меньше вариантов

95% (составленная статистика) кода Go выглядит точно так же, потому что этот инструмент можно легко применить, а поскольку стиль определяется для вас разработчиками Go, у вас гораздо больше шансов адаптироваться к этому стандарту, а не настаивать на свой собственный стиль. Например, табуляция против пробелов или где поставить открывающую скобку.

Это может показаться ограничением, но на самом деле это очень мощно. Весь код Go выглядит одинаково.

Красивее gofmt для остального мира.

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

Разница с ESLint

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

Это бесценный инструмент, и его можно использовать вместе с Prettier.

ESLint также выделяет проблемы форматирования, но, поскольку он намного более настраиваемый, у всех может быть свой набор правил форматирования. Prettier дает общую основу для всех.

Теперь вы можете настроить несколько вещей, например:

и некоторые другие, но Prettier пытается держать количество этих настроек под контролем, чтобы не становиться слишком настраиваемыми.

Установка

Prettier может запускаться из командной строки, и вы можете установить его, используяПряжаили жеnpm.

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

Красивее для новичков

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

Хороший стиль способствует укреплению хороших привычек.

Кроме того, даже если вы начали использоватьJavaScriptДве недели назад с Prettier ваш код с точки зрения стиля будет выглядеть точно так же, как код, написанный гуру JavaScript, пишущим JS с 1998 года.

How to setup ESLint and Prettier with VS Code and VueJS

July 20, 2020 ( 9 min read )

Most people understand the concepts of code linting and formatting and how crucial they are in our development workflows. And yet, even with CLI’s and boilerplates it can still be pretty frustrating to get it all set up properly.

In this post we’re going to focus on VueJS 2.x, VS Code, and how to get ESLint and Prettier all working together like, like… a bunch of stuff working together really really well… 💪 or at least something analogous to a symbiotic relationship anyway.

The goal is to have linting errors show up in your editor as live feedback, and be able to fix formatting errors automatically on save, while not having the two conflict with each other!

I want to avoid the nonsense shown in the GIF below:

There’s also a video version of this tutorial if that’s how you prefer to learn: https://youtu.be/7qfMmCN4Uwk

🥊 Linting VS Formatting

First, it’s important we understand the difference between linting and formatting.

Linters are primarily concerned with code quality. Having a rule setup that disallows empty functions is an example of a check for code quality.

Linting rules are designed to catch common gotchas or code smells 🦨 and are intended to help developers prevent them from happening in their code bases 🏰.

Formatters on the other hand, are concerned with code style. Like whether you should include a semi-colon at the end of a statement (the answer is NO obviously 🙄), or if indentations should be 2 spaces or 4.

Linters usually have some overlap with formatters. ESLint, for example, has plenty of rules that are just code style related. This line drawn between code style and code quality can also be blurry since arguably having consistent style is a part of having good code quality.

None-the-less it’s important to categorize the two as separate concerns, since the tools we’re going to be configuring need to play together nicely. This means we need to set them both up to handle what they’re strongest at.

For this tutorial we’re going to use the Vue CLI to scaffold our VueJS project. This will get us 90% of the way to having everything we need so it makes sense to just do this.

If you’d like to see a more in-depth tutorial explaining how to set this all up from scratch, let me know in the comments below!

Just incase at the time of reading there are newer versions of the CLI scaffold your project like this:

That will just make sure we’re working with the same versions of everything and you won’t have to worry about conflicting with your global install if you have one already.

cd into the new project and open it up inside Code. Now take a look at your package.json file.

You’ll notice under scripts there’s already a lint command set up for us!

In addition to that you should see a eslintConfig section that sets up everything needed to run ESLint with a VueJS app. We’ll get back to the options later.

For now, I want you to open your HelloWorld.vue file. On the very first line, add a key attribute and set the value to anything you want. For example:

If you run the command npm run lint or yarn lint you should see an error with the text: error: ‘ ‘ cannot be keyed. Place the key on real elements instead (vue/no-template-key) at src/components/Hello.vue:1:1:

This happens because one of the default rules configured from the CLI is no-template-key, an example of a code quality rule. If you remove the key and run yarn lint again you’ll see a clean run!

The essential extension is the loosest of them all. If you change it to plugin:vue/recommended you’ll get close to 80% of the rules available.

Not bad… but it would be way cooler to see the feedback directly inside our IDE without having to worry about running that command in our terminal. The command will still be super useful for Continuous Integration but we’re humans, not machines!

Get Linting Errors To Show In VS Code

Chances are, if you’re using VueJS you probably already have this plugin installed, but just incase, go install Vetur now! It’s the one with 5M+ installs…

Now search for “vetur” and scroll all the way down to the bottom and make sure you check all the “validation” options like this:

Next you’ll want to install the ESLint plugin by Dirk Baeumer. (Yeah I read that “Boromir” in my head to 😉). The default settings will be fine.

Now go ahead and add that key attribute back to your template tag in HelloWorld.vue

Hopefully at this point you’re seeing a ton of red lines! If not, let me know in the comments and I’ll try to help you out.

Please excuse the fact that I renamed HelloWorld.vue to Hello.vue — thanks!

If you hover over any of the red lines you should see the text: ‘ ‘ cannot be keyed. Place the key on real elements instead.eslint(vue/no-template-key) just like we saw in the command line before!

👩‍💻 Format The Code

Now Vetur, among many other features, has formatting built-in. This is important in a VueJS application since usually we’re mixing HTML that uses Vue’s templating engine, JavaScript and sometimes CSS too depending on how loony you are 😜.

Vetur handles figuring out how to format these complicated files known as Vue SFC’s. (Single File Components). Problem is, it still needs to be configured with a formatter to do the actual formatting bit. For this guide we’re going to use Prettier, a code formatter.

Now if you go back to your Vetur settings you’ll see there are a ton of settings for formatting. Make sure that your HTML, CSS, and JS are all set to use Prettier like this:

Now inside your HelloWorld.vue you can open your command pallet with ctrl + shift + p or cmd + shift + p and type ”format”. You should see an option ”Format Document With…”. Choose that one!

Perhaps counterintuitively, you need to format with Vetur not Prettier. Remember, Vetur is handling the formatting it’s just using Prettier as the driver underneath.

You can set Vetur as the default by selecting ”Configure Default Formatter” after ”Format Document With…” then select ”Vetur” from the options.

Last detail is to make sure your VS Code setting ”Editor: Format On Save” is turned on.

And now we’re almost there!!

Unless you changed the default ESLint settings earlier, you should be able to format your code on save and NOT see any conflicts between your lint rules and the formatted code like observed in the GIF at the beginning of this post.

Problems will arise however. Like ghouls in the night they will come for you and they’ll want your skull 💀. Quick, lets put out some bait and watch them come!

Just for fun change the line in your package.json file where you have plugin:vue/essential to plugin:vue/recommended instead.

Now open your HelloWorld.js file again and observe all those red squiggly lines! Ahhh 😱!

Easy fix though. Just run yarn lint in your terminal and watch them be eradicated! Feels good seeing all those errors get cleaned up by themselves don’t it?

Wait… but now if we save the file… Ugghhh 😭 why.

Now we’re just caught in a loop… Ghouls come, so we kill them (naturally). But killing the ghouls spawns more ghouls! And by ghouls I mean squiggly red lines here guys.

🏠 Bringing It Home

Ok now it’s time to make everyone play nice. Remember earlier when I explained Linters have some overlap with Formatters? And how Linters really should only be focused with code quality and not code style? Well this is where it all comes together my friends.

The folks over at Prettier are aware of this little problem we have right now and offer an easy fix. It’s called eslint-config-prettier.

Hao’s learning log

Coding, Software, Web Development, UX, Productivity, Career tips, Personal Development

VS Code, Svelte and Prettier set up

4th January 2020

I recently tried to set up a new project to try out Svelte in more depth. I search everywhere but couldn’t get VS Code (e.g. on file save) and Prettier CLI (e.g. running npm run lint ) working at the same time. After hours of trial and error, I finally got it to a place I’m happy with. Hopefully, this will help anyone in a similar position.

Install Dependencies

svelte because we want to develop apps with it, duh! parcel-bundler parcel-plugin-svelte Svelte works with all the popular bundler tools such as Webpack, Rollup and Parcel. Personally, I’m a big fan of Parcel so I’ve gone with it here. prettier prettier-plugin-svelte People tend to use a mixture of Eslint and Prettier for code formatting and linting. But I wanted to keep dev dependencies lite, so I’m only using Prettier in this case.

Project Structure & Files

package.json

When using Svelte with Parcel, one thing to note is to ensure the main property is set to the correct.

Notice here we are using Prettier CLI to both check linting and auto-fix linting errors. This means we could both check for linting errors and auto fix them in the terminal by running npm run lint and npm run lint:fix respectively. It is a good practice to run at least the lint check in the CI pipeline to ensure code consistency.

What about VS Code, you might ask. We’ll cover how to set up auto format each time we save a file in later sections. Unfortunately, the CLI auto format and VS Code auto format shares very little in common so will require two different setups. This is also one of the reasons it took me a while to get it working the way I wanted.

package-lock.json

I’m going to skip package-lock.json since it is a generated file.

.prettierrc

For Prettier I try to leave most of the formatting options as default, with the following exceptions.

.gitignore

A very standard git ignore file.

src/index.html

src/index.js

src/style.css

src/App.svelte

VS Code Set Up

Extensions

In order to get the best Svelte support, install the following VS Code extensions:

It might be useful to install these extensions as well, but they are optional.

Settings

Within src folder we have 3 main file types that requires linting and formatting:

In order to get format on file save working, open Settings (JSON) then add the following options:

Then open up the different file types and see what VS Code is showing on the bottom status bar. Notice how both JavaScript and HTML have Prettier ticked, and Svelte doesn’t.

As mentioned above the npm run lint and npm run lint:fix will work with Svelte file types no problem. However, Prettier in VS Code for some reason just doesn’t want to auto format Svelte files. So I left the auto format to VS Code’s Svelte extension instead of the Prettier extension.

Почему Prettier не форматирует код в VS Code?

В моем приложении Nuxt, где установлены и включены ESlint и Prettier, я переключился на Visual Studio Code.

Мои настройки .prettierrc :

У меня так много строк исходного кода, что я не могу их форматировать вручную. Что я делаю неправильно?

Как я разобрался после огромного разочарования из-за того, что Prettier перестал работать в VSCode.

Это волшебным образом решило мою проблему.

Убедитесь, что в вашем Editor: Default Formatter поле нет поля, null а esbenp.prettier-vscode все перечисленные ниже языки отмечены галочками. Это устранило мою проблему.

ПОШАГОВАЯ ПРОГУЛКА

Также убедитесь, что ваш формат при сохранении включен:

Prettier также может форматировать ваши файлы при сохранении.

Однако установка и включение не приводят к работе.

Иногда prettier перестает работать, когда в коде есть синтаксические ошибки. Вы можете просмотреть ошибки, нажав кнопку x в правом нижнем углу рядом с Prettier.

отключить и включить prettier расширение решает мою проблему

Я не использую Vue, но возникла та же проблема.

У меня уже были настройки

Я столкнулся с этой проблемой, и эти три шага решили мою проблему:

prettier.disableLanguages (default: [«vue»])

A list of languages IDs to disable this extension on. Restart required. Note: Disabling a language enabled in a parent folder will prevent formatting instead of letting any other formatter to run

вы можете попробовать добавить этот раздел в свой файл VS Code settings.json?

При нажатии на этот статус панель вывода должна сообщить о проблеме в файле HTML. Для меня проблема заключалась в том, что у меня был div внутри тега ap, против которого, как я полагаю, выступают соглашения prettier / VSCode. Когда я удалил его (и в сочетании со всеми вышеперечисленными настройками, а именно форматировщиком по умолчанию и форматированием при сохранении ), я стал лучше работать.

.prettierrc не требуется, если вы не хотите переопределить настройки VSCode.

1. Использование другого расширения prettier не работает для меня, я просто использую другое расширение VSCODE с именем, PrettierNow я думаю, это поможет, сделано для меня. Оформить заказ на расширение можно здесь

Включение «форматирования при сохранении» в VSCode: Настройка >> Пользователь >> Текстовый редактор >> Форматирование у меня сработало! 🙌

если не работает, закройте и снова откройте редактор vscode

Если Prettier автоматически форматирует все остальные файлы, кроме файлов HTML, при сохранении:

Нажмите Cmd + P или, Ctrl + P чтобы открыть палитру команд, и введите в нее следующий текст:

Hao’s learning log

Coding, Software, Web Development, UX, Productivity, Career tips, Personal Development

VS Code, Svelte and Prettier set up

4th January 2020

Install Dependencies

Project Structure & Files

package.json

When using Svelte with Parcel, one thing to note is to ensure the main property is set to the correct.

package-lock.json

I’m going to skip package-lock.json since it is a generated file.

.prettierrc

For Prettier I try to leave most of the formatting options as default, with the following exceptions.

.gitignore

A very standard git ignore file.

src/index.html

src/index.js

src/style.css

src/App.svelte

VS Code Set Up

Extensions

In order to get the best Svelte support, install the following VS Code extensions:

It might be useful to install these extensions as well, but they are optional.

Settings

Within src folder we have 3 main file types that requires linting and formatting:

In order to get format on file save working, open Settings (JSON) then add the following options:

Then open up the different file types and see what VS Code is showing on the bottom status bar. Notice how both JavaScript and HTML have Prettier ticked, and Svelte doesn’t.

prettier / prettier-vscode Goto Github PK

Visual Studio Code extension for Prettier

License: MIT License

TypeScript 88.39% JavaScript 8.47% CSS 0.07% HTML 0.55% PHP 0.57% Vue 0.09% SCSS 0.30% Shell 0.07% Dockerfile 1.20% Handlebars 0.28% formatter typescript visual-studio-code visual-studio-code-extension

prettier-vscode’s Introduction

Prettier Formatter for Visual Studio Code

JavaScript · TypeScript · Flow · JSX · JSON
CSS · SCSS · Less
HTML · Vue · Angular HANDLEBARS · Ember · Glimmer
GraphQL · Markdown · YAML
Your favorite language?

Can also be installed in VS Code: Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.

The following will use Prettier for all languages except Javascript.

The following will use Prettier for only Javascript.

Additionally, you can disable format on save for specific languages if you don’t want them to be automatically formatted.

To install prettier in your project and pin its version as recommended, run:

NOTE: You will be prompted to confirm that you want the extension to load a Prettier module. This is done to ensure that you are not loading a module or script that is not trusted.

Configuring Default Options

Visual Studio Code Settings

You can use VS Code settings to configure prettier. Settings will be read from (listed by priority):

Using Command Palette (CMD/CTRL + Shift + P)

Visual Studio Code provides default keyboard shortcuts for code formatting. You can learn about these for each platform in the VS Code documentation.

If you don’t like the defaults, you can rebind editor.action.formatDocument and editor.action.formatSelection in the keyboard shortcuts menu of vscode.

Respects editor.formatOnSave setting.

You can turn on format-on-save on a per-language basis by scoping the setting:

Format selection works on several languages depending on what Prettier itself supports. The following languages currently are supported:

Format Document (Forced)

The default values of these configurations are always to their Prettier 2.0 defaults. In order to use defaults from earlier versions of prettier you must set them manually using your VS Code settings or local project configurations.

These settings are specific to VS Code and need to be set in the VS Code settings file. See the documentation for how to do that.

prettier.enable (default: true )

Controls whether prettier is enabled or not. You must restart VS Code when you change this setting.

prettier.requireConfig (default: false )

Note, if this is set, this value will always be used and local ignore files will be ignored.

Disabled on untrusted workspaces

Supply a custom path to the prettier configuration file.

Note, if this is set, this value will always be used and local configuration files will be ignored. A better option for global defaults is to put a

/.prettierrc file in your home directory.

Disabled on untrusted workspaces

prettier.resolveGlobalModules (default: false )

When enabled, this extension will attempt to use global npm or yarn modules if local modules cannot be resolved.

NOTE: This setting can have a negative performance impact, particularly on Windows when you have attached network drives. Only enable this if you must use global modules. It is recommended that you always use local modules when possible.

Note: Disabling a language enabled in a parent folder will prevent formatting instead of letting any other formatter to run

Disabled on untrusted workspaces

prettier.useEditorConfig (default: true )

Disabled on untrusted workspaces (always false)

prettier.withNodeModules (default: false )

Whether or not to process files in the node_modules folder.

Disabled on untrusted workspaces

Failed to load module. If you have prettier or plugins referenced in package.json, ensure you have run npm install

Your project is configured to use an outdated version of prettier that cannot be used by this extension. Upgrade to the latest version of prettier.

You must upgrade to a newer version of prettier.

This workspace is not trusted. Using the bundled version of prettier.

You must trust this workspace to use plugins and local/global modules. See: Workspace Trust

Vs code prettier настройка

17 contributors

Users who have contributed to this file

Copy raw contents

Prettier uses cosmiconfig for configuration file support. This means you can configure Prettier via (in order of precedence):

The configuration file will be resolved starting from the location of the file being formatted, and searching up the file tree until a config file is (or isn’t) found.

Prettier intentionally doesn’t support any kind of global configuration. This is to make sure that when a project is copied to another computer, Prettier’s behavior stays the same. Otherwise, Prettier wouldn’t be able to guarantee that everybody in a team gets the same consistent results.

The options you can use in the configuration file are the same as the API options.

Overrides let you have different configuration for certain file extensions, folders and specific files.

Prettier borrows ESLint’s override format.

files is required for each override, and may be a string or array of strings. excludeFiles may be optionally provided to exclude files for a given rule, and may also be a string or array of strings.

An example configuration repository is available here.

Setting the parser option

By default, Prettier automatically infers which parser to use based on the input file extension. Combined with overrides you can teach Prettier how to parse files it does not recognize.

If you’d like a JSON schema to validate your configuration, one is available here: http://json.schemastore.org/prettierrc.

Here’s an annotated description of how different properties map to Prettier’s behavior:

How to set up Visual Studio Code (VSCode) for next level productivity

Published on Sep 23, 2019. 11 minute read.

On a day-to-day basis, both inside and outside of work, I spend most of my time writing front-end code (specifically, React.js) using VS Code. Productivity is very important, as I am usually under pressure to get work done quickly and to the highest standards. Having the right editor set-up goes a long way to ensuring that I am not wasting time on menial tasks like code formatting and instead spend that time focusing on the problem at hand.

My editor and project should be correctly configured and ready for the problem at hand.

How to configure Prettier, ESLint and Stylelint

Prettier, ESLint and Stylelint are essential tools for helping you and your team write cleaner, more maintainable code.

Prettier is an opinionated code formatter. Prettier takes your code, and moves it around and “tidies” it up in a standard way. Prettier works in conjunction with ESLint. Stylelint essentially is ESLint and Prettier for CSS and SCSS.

EditorConfig attempts to override user settings (tabs vs spaces, indent size etc) on a per project basis to ensure consistency between machines and developers.

I highly recommend installing in VS Code the official extension for each tool, so that you can configure VS Code to run them automatically instead of having to rely solely on NPM scripts.

With all the extensions installed, you can configure your project with various dot files and NPM scripts.

How to set up and configure ESLint

ESLint uses rules to decide how to lint your code. ESLint can be configured manually or using a pre-existing ruleset. Configuring ESLint manually can be a huge undertaking, so many people use open source rulesets instead. In this case, we have used the popular Airbnb styleguide, with a couple of customisations.

Install ESLint and its dependencies using the following command;

How to set up and configure Prettier

Install Prettier and its dependencies using the following command;

For a full explanation of what exactly each of these options means, have a look at the documentation. Most should be self-explanatory. You can adjust these settings on a project-by-project basis.

How to set up and configure Stylelint

Stylelint helps with consistency and to avoid common CSS errors. Stylelint uses rules to decide how to organise and format code. Stylelint can be configured manually or using a pre-existing ruleset.

Personally I use stylelint-config-standard for all my projects and I never override it. If you want to choose a different ruleset, have a look at the documentation.

Install Stylelint and its dependencies using the following command;

Next time you work on a CSS or SCSS file and save changes, your code should be automatically tidied and organised.

You can turn on Format On Save, so that Prettier/ESLint and Stylelint run automatically on every save, as follows;

Now each time you press save, or the file you are working on auto saves, Prettier will run automatically and tidy your code. This is great because it completely eliminates the need to care about formatting ever again. 👍

How to set up and configure EditorConfig for VS Code

I prefer 2 spaces, no trailing whitespace, and a new empty line at the end of each file. If you want to understand what each of these options does, have a look at the documentation.

You can run Prettier and ESLint directly from NPM scripts (if you prefer not to use the extensions). Add the following scripts to your package.json file.

The added benefit is that you could call these scripts directly from your pre-commit hooks, which we will look at shortly.

Font ligatures in VS Code

You might not exactly need font ligatures, but they are cool and they certainly do improve code readability. Only specific fonts support ligatures.

The graphic shows code on the left with ligatures, and code on the right without. (Borrowed from Fira Code GitHub repo). Ligatures are purely visual and do not impact the code you write/commit.

To set up, do the following;

You may need to restart VS Code to see the change.

How to configure VS Code to use iTerm2 and Oh-my-zsh

You will spend a lot of time in the terminal so I highly recommend taking some time to add a decent terminal. The terminal built in to Mac and Windows are decent enough, but iTerm and Oh-my-zsh have many power-tools and are easy to extend with community built plugins.

Personally, I use iTerm2 with Oh-My-Zsh and the Agnoster theme, which gives a really nice visual style and indicative icon set that gives me more information about the repo I am working on and the success of executing the previous command.

First, download iTerm2, then follow this very precise tutorial on how to set up Oh-My-Zsh with VS Code. When done, be sure to go ahead and install the Zsh Autosuggestions plugin. This little plugin is a real timesaver, as it shows you autocomplete options based on commands you have ran in the past.

The best productivity extensions for VS Code

When starting out, I recommend these extensions to boost your productivity.

Not strictly an extension. VS Code has built in support for Emmet, which I highly recommend learning to a good level. Emmet is a text expander, so you can save time on typing long repetitive code.

Finally, if you find yourself typing out the same repetitive code over and over, consider making a custom snippet. There is an excellent official user guide that explains how to do this.

VS Code best shortcuts cheat sheet

Repeating an action over-and-over and using the mouse every time? Using a keyboard shortcut is probably more efficient.

Key	Description
⌘ S	Save
⌘ P	Go to file
⌘ F	Find in file
⌘ ⇧ F	Global search
⌘ ⇧ P	Open command pallete
⌘ ⇧ Up	Move line up
⌘ ⇧ Down	Move line down
⌘ ⇧ Right	Select line to the end
⌥ ⇧ Drag	Multi cursor one per line
F12	Go to definition

This is a non-exhaustive list of shortcuts within VS Code that I use on a regular basis (probably many dozens of times a day). It is worth taking some time to memorise these, or perhaps print them out and put them somewhere visible to you.

How to use Husky for on pre-commit/pre-push

Setting up your repo with Husky is easy. First, ensure you have Prettier installed;

Then install Husky, and Lint-Staged using the following command;

The necessary packages will be added to your package.json and a new section will be added. Exactly what gets added will depend on the code in repo. You will probably end up with something as follows;

You can modify this config as you see fit. I like to add the pre-push hook to run my tests automatically, as follows;

Now any file you work on, stage, and commit will be automatically linted, and your tests will run automatically so no more accidental broken commits!

We covered a lot of ground in this post. We looked at how to set up and configure Prettier, ESLint, and Stylelint in VS Code. We also discussed how to run Prettier and ESLint automatically, via NPM scripts, and via pre-commit hooks using Husky and Lint-Staged. We also discussed how to install the popular open source coding font Fira Code, and turn on font ligatures. We briefly touched on how to configure VS Code to use iTerm2 and Oh-my-zsh (with plugins), and how to boost your productivity by installing several third-party extensions. Finally, I highlight some of the most common keyboard shortcuts to speed up repetitive tasks that are slow when using a mouse.

About the author

Jon Preece is a professional front-end development specialist.

For over a decade, Jon has worked for some of the biggest and best UK based companies, on a wide range of products. Get in touch via Twitter.

Prettier Extension Not working in VS Code #1156

Comments

Nairitya commented Dec 20, 2019 •

Running the contributed command: ‘prettier.openOutput’ failed.
I am getting this error on VS code.

The text was updated successfully, but these errors were encountered:

Nairitya commented Dec 20, 2019

Prettier latest version [3.17.0]
vs code latest version 1.41.1
Format on Save is ‘ON’
Default Formatter esbenp.prettier-vscode

im-sven commented Dec 20, 2019

In my case this issue was caused by using the optional chaining operator (?). Try to run the prettier from the command line and see wether it returns any syntax errors.

williampsena commented Dec 20, 2019

I was facing the same problem.
But after reinstall, everything works again.

cpachmayr commented Dec 20, 2019

Having the same problem even after reinstalling. @williampsena did you mean resintalling the prettier extension, or reinstall VSCode?

williampsena commented Dec 20, 2019

Having the same problem even after reinstalling. @williampsena did you mean resintalling the prettier extension, or reinstall VSCode?

I reinstalled prettier extensions.

Nairitya commented Dec 20, 2019

Having the same problem even after reinstalling. @williampsena did you mean reinstalling the prettier extension, or reinstall VSCode?

I tried uninstalling and reinstalling Prettier Extension but it didn’t work for me so I uninstalled VS Code completely and then installed it again. Now Prettier is working fine. Earlier I was also using Auto Rename tag so maybe it was causing problem I don’t know but after uninstalling VS code completely, the problem is gone.

aelders-ncino commented Dec 20, 2019 •

Reinstalling prettier extensions did not work for me. Setup info:

Nairitya commented Dec 20, 2019 •

Reinstalling prettier extensions did not work for me. Setup info:

Yes, same here! reinstalling prettier didn’t work for me. So I uninstalled VS Code completely and then reinstalled it and then I installed Prettier and it is working now. Try this.

dlopatin-v commented Dec 22, 2019

Reinstall VS Code is not good solution.

ShahoG commented Dec 22, 2019

I suggest this be opened again as I have the same problem

iKettles commented Dec 22, 2019

dlopatin-v commented Dec 23, 2019 •

andrewktdoan commented Jan 12, 2020

I went down the list of issues and solutions and tried most of the suggestions and still not working for me. It works fine for JS but didn’t work for HTML for me. When I launch it, the «INFO» shows that it is enabled for a wider range of languages the instantly cut the list shorter and excluded HTML.

I’ve uninstalled the extension, VS Code, restarted my computer and reinstalled them back and still the same issue. Any other suggestions gentlemen and gentleladies?

Below is the INFO message I got.

saurav1423 commented Mar 10, 2020

I don’t know why this error is coming. If anyone has faced same problem then please let me know the solution.

paulmaunders commented Mar 28, 2020 •

It’s not working for me either. I get the info messages saying «Enabling prettier for range supported languages», but I can’t get it to prettify my code.

CMD + SHIFT + P only gives me the option for «Prettier: Create configuration file». I don’t see any option to run it on the code.

I tried reinstalling VSC and the extension, but that didn’t help. I’m using Prettier 3.20.0

paulmaunders commented Mar 28, 2020

OK I realised I had to press CMD + SHIFT + P, then type ‘Format document’ to get it to run. I should have read the manual more closely!

skeemybbob commented Apr 14, 2020

@paulmaunders that worked once. this is odd. I didn’t have to manually do it on my desktop, but on my MBP it only reformats when I do it that way, or when I do the (recently learned) keystroke method of opt+shift+F. Weird.

skeemybbob commented Apr 14, 2020

eliamartani commented May 4, 2020

Pretty similar to you guys, I’ve selected the option «Format Document With. » found out the default was other than Prettier. Clicked «Configure Default Formatter. » and then Prettier.
Just in case any of you face similar issue in future.

allanaes commented May 13, 2020

Prettier latest version [3.17.0]
vs code latest version 1.41.1
Format on Save is ‘ON’
Default Formatter esbenp.prettier-vscode

In case someone like me don’t know this setting exists, this solves the problem. My default Editor:Default Formatter is set to null and Editor:Format on Save is not ticked. Thank you.

Prettier, ESLint, Husky, Lint-Staged и EditorConfig: инструменты для написания аккуратного кода

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

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

Автор этого материала говорит, что он сталкивался со всем тем, чему посвящены только что заданные вопросы. То, с чем он столкнулся, утомляет и изматывает. Здесь он хочет рассказать об инструментах, правильное применение которых позволяет решить вышеописанные проблемы.

А именно, здесь пойдёт речь о таких средствах как Prettier, ESLint, Husky, Lint-Staged, EditorConfig, об автоматизации форматирования и линтинга кода. Этот материал ориентирован, в основном, на React-разработку, но рассмотренные здесь принципы можно применить в любом веб-проекте. Вот репозиторий, где, кроме прочего, собрано то, о чём тут пойдёт речь.

Prettier

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

Prettier форматирует код, следуя правилам

▍Сильные стороны Prettier

Вот какие возможности и особенности Prettier позволяют говорить о полезности этого инструмента:

▍Настройка Prettier

Установим пакет prettier в качестве зависимости разработки нашего проекта:

Благодаря этой команде в package.json будет добавлена запись о зависимости разработки, которая выглядит так:

В этот файл внесём следующий код (именно в таком вот неприглядном виде):

Как это исправить? Существует три подхода к работе с плохо отформатированным кодом:

Разберём эти правила:

Вот что произойдёт, если оно установлено в значение false :

Теперь, когда правила настроены, поговорим об этом скрипте:

Запустим скрипт из командной строки:

Вот что стало после этого с показанным выше плохо отформатированным кодом.

Результат форматирования кода с помощью Prettier

На этом будем считать, что с Prettier мы разобрались. Поговорим о линтерах.

ESLint

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

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

▍Зачем нужен линтер для JavaScript?

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

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

▍Почему ESLint — это особенный инструмент?

В заголовок этого раздела вынесен хороший вопрос. Дело тут в том, что ESLint поддерживает плагины. Так, правила проверки кода не должны представлять собой монолитный пакет. Всё, что нужно, можно подключать по мере необходимости. Каждое добавляемое в систему правило линтинга автономно, оно может быть, независимо от других, включено или выключено. Каждому правилу можно назначить уровень оповещения в соответствии с желанием разработчика — это может быть предупреждение (warning) или ошибка (error).

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

Среди существующих руководств по стилю JavaScript можно отметить следующие, весьма популярные:

Это руководство активно поддерживается — взгляните на его репозиторий на GitHub. Здесь я буду использовать набор правил, основанный именно на нём.

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

Этот файл имеет следующую структуру:

Рассмотрим блоки этого файла, представленные объектами с соответствующими именами:

Здесь заданы три папки:

Запуск скрипта lint

Если выполнить второй скрипт ( yarn lint:write ), то ESLint выполнит такую же проверку, которая была выполнена раньше. Единственное различие заключается в том, что в таком режиме система попытается исправить обнаруженные ошибки, постарается привести код в как можно более пристойный вид.

Расширение ESLint для VS Code

У нас уже есть настроенные Prettier и ESLint, но, чтобы пользоваться возможностями этих инструментов, нам приходится запускать скрипты. Это не очень-то удобно, поэтому попробуем это исправить. А именно, мы хотим добиться того, чтобы форматирование и линтинг кода выполнялись бы по команде сохранения файла в редакторе. Кроме того, выполнять линтинг и форматирование кода мы хотим перед выполнением коммитов.

Рассмотрим его содержимое.

Представьте свои ощущения, если бы к вам попал код проекта размером в 20000 строк, который вам надо было бы проверить и улучшить. А теперь представьте себе, что вам пришлось бы это делать вручную. Такая работа заняла бы, наверное, месяц. А с помощь вышеописанных средств автоматизации всё это делается секунд за тридцать.

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

Husky

Пакет Husky позволяет задействовать хуки Git. Это означает, что у вас появляется возможность выполнять некие действия перед выполнением коммита или перед отправкой кода репозиторий.

Для того чтобы воспользоваться возможностями Husky, сначала установим этот пакет:

После этого добавим в package.json следующее:

Это приведёт к тому, что перед выполнением команды commit или push будет вызван некий скрипт, который, например, выполняет тестирование кода или его форматирование.

Подробности о Husky можно почитать здесь.

Lint-staged

Пакет Lint-staged позволяет проверять с помощью линтера индексированные файлы, что помогает предотвратить отправку в репозиторий кода с ошибками.

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

Lint-staged позволяет выполнять набор произвольных задач над индексированными файлами, отфильтрованными по шаблону поиска. Подробности об этом можно почитать здесь.

Установим пакет Lint-staged:

Совместное использование Husky и Lint-staged

Приведём снова, для удобства, содержимое нашего package.json :

Теперь, зная о Husky и Lint-staged, вы можете оценить их влияние на работу с Git. А именно, предположим, что были выполнены следующие команды:

Теперь вы знаете о том, как интегрировать Prettier, ESLint, Husky и Lint-staged в свой проект.

На сайте проекта можно найти список редакторов, которые поддерживают этот файл. В него, в частности, входят WebStorm, AppCode, Atom, Eclipse, Emacs, BBEdit и другие.

Поясним настройки, использованные в этом файле:

Итоги

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

Уважаемые читатели! Какими инструментами вы пользуетесь для проверки и форматирования кода? Как автоматизируете эти процессы?

mauabe/eslint-prettier-vscode

Use Git or checkout with SVN using the web URL.

Work fast with our official CLI. Learn more.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

Git stats

Files

Failed to load latest commit information.

README.md

Eslint + Prettier + VScode

This is a quick way to check your Javascript code and make it pretty too.

It uses Eslint to verify the code, but uses Prettier to format it, and brings the AirBNB Javascript style guide to make the code universally accepted.

You don’t have to follow any of the rules and suggestions, but this is a good starting point, so you don’t have to reinvent the wheel.

This is a a good tutorial on how to create your own file if you don’t want to use this «standard» settings: https://blog.echobind.com/integrating-prettier-eslint-airbnb-style-guide-in-vscode-47f07b5d7d6a

The starting point

Let’s assume you already have npm and npx installed. You will need these to complete your linter.

Download this repository to your computer.

Copy and paste the contents of the repository package.json into the package.json in the project folder you just created.

Now you have two options: The easy way is to simply run npm i in the directory where your package.json lives. npm will read the dependenciaes and install everything you need.

The hard way is to run the following commands on the terminal. You are installing all dependencies one by one. There is no difference here, but this method gives you the opportunity to know what you are installing and leave things out, or add things in. Your call.

I use React a lot, so I have some React and React Hooks rules, but feel free to modify them.

Now you have have it all running. You have to download and install Prettier and Eslint exentensions.

Click on the squareish icon on the Activity bar. Search and install ESLint, by Dick Bauemer and Prettier by Esben Petersen. After installing you might have to enable them in your editor.

Running on command line

Use npm run eslint to verify your code or npr run eslint-fix to verify and correct your code.

Running on VSCode

One more step: Under the VSCode User Settings, change the following line:

Voila, now when you save your file, it is being error-corrected and prettiefied. Life doesn’t get easier than that. Save this instructions and use them on all your future projects.

Всегда чистый код: 5 инструментов для JavaScript-разработчика

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

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

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

Все это утомительно, беспокойно и просто бессмысленно. Забудьте об этом. В конце концов, вы же программист! Так переложите ответственность за чистый код на машину.

Давайте вместе разберемся с пятью лучшими инструментами в арсенале веб-разработчика: Prettier, ESLint, Husky, Lint-Staged и EditorConfig. Чтобы увидеть, как они используются на практике, загляните в этот репозиторий.

Prettier

Prettier – инструмент, который будет форматировать ваш код за вас. Примерно вот так:

У Prettier есть огромные преимущества:

Настройка

Установите первый пакет:

package.json теперь выглядит так:

Это выглядит ужасно, очень ужасно. Что вам теперь делать с этим уродливым кодом?

Пробежимся по настройкам:

Теперь давайте разберемся, как работает этот скрипт:

С нашим уродливым кодом происходит чудо:

Легким движением руки он превращается в чистый код. Круто, правда?

ESLint

Линтинг – это статический анализ кода, который позволяет обнаружить проблемные места или несоответствия определенному стилю. Для линтинга JavaScript мы будем использовать ESLint.

Слабая динамическая типизация JavaScript – причина многих ошибок. Этот язык не компилируется, поэтому для проверки кода приходится полностью выполнить его. Линтеры позволяют найти подозрительные места, не запуская каждый раз программу.

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

В настоящее время существует два популярных JS-стайлгайда, чтобы создавать чистый код: от Google и от Airbnb. Воспользуемся последним.

Настройка

Для начала обновите файл package.json :

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

С плагинами husky и lint-staged мы разберемся позже в разделе, посвященном автоматизации, а сейчас приступим к работе.

Разберем каждую секцию файла конфигурации отдельно:

Перейдем к новым командам из секции scripts:

Что ж, если вы дошли до этого раздела, вы молодец!

Автоматизация

Итак, мы настроили Prettier и ESLint, но чтобы запустить их, приходится каждый раз вводить команду в терминале. Было бы здорово автоматически проверять и форматировать код при сохранении файла в редакторе, а также при каждом коммите.

Линтинг при сохранении файла

Если вы работаете в VS Code, это очень просто. Нужно лишь установить расширение ESLint. Загрузите его отсюда или откройте поиск с помощью ctrl+shift+x и введите там eslint.

Работать стало удобнее, можно продолжать автоматизацию.

Husky

Husky дает возможность зацепиться за хуки git. Это значит, что вы можете выполнять некоторые действия перед тем, как изменения будут закоммичены и отправлены в удаленный репозиторий.

Сначала установите пакет husky:

и добавьте этот фрагмент в файл package.json :

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

Lint-staged

Lint-staged помогает запускать линтеры в файлах, подготовленных к коммиту, чтобы неформатированный код не попадал в репозиторий.

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

Установите пакет lint-staged:

и добавьте этот фрагмент в файл package.json :

Husky + Lint-staged

Финальный вариант файла package.json :

Теперь каждый раз, когда вы сохраняете изменения:

весь код будет проверен и отформатирован, так что ваш репозиторий будет чист.

EditorConfig

Конфигурация EditorConfig применима для многих редакторов. Этот пример управляет пробелами и табуляцией, максимальной длиной строки и стилем перевода строки.

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

Prettier & ESLint Setup for VSCode

I have been using ESLint for linting and fixing my javascript for a long time, but lately, it has been giving me a lot of trouble, so I started looking for an alternative and came across prettier. I used prettier earlier as well but I was not ready to give up my ESLint workflow as it worked fine back then.

ESLint and Prettier Primer

Before diving into the configuration, let’s understand what these tools are used for.

ESLint

Example config file

Exit fullscreen mode

This is a very basic config file but you can find more info about various rules and config options here.

Prettier

Prettier is a code formatter, it formats your code according to the rules you specify in the prettier config file.

Example config file

Exit fullscreen mode

Again this is a very basic config file you can find more config options by following this link.

Configuration

To get started first we need to install Prettier and ESLint extensions from the VSCode marketplace.

Configuring ESLint

From your project root run the following command.

Exit fullscreen mode

The configuration wizard will ask a few questions to setup your config file.

Prettier Configuration

Install Prettier in your project locally(recommended).

Exit fullscreen mode

Integrating Prettier with ESLint

So far we have setup Prettier and ESLint they both work fine on their own but sometimes they interfere with each other, let’s fix that.

Exit fullscreen mode

Updating VSCode Settings

To finalize our config we need to tell VSCode to use Prettier as a formatter. Add the following to your VSCode settings.

Exit fullscreen mode

Format On Save

Enable format on save by adding the following to your config.

Exit fullscreen mode

Conclusion

Setting up your dev environment is very useful, and tools like Prettier and ESLint can help your code stay consistent across projects and while working with teams.

If you encounter some problem, reach out to me via twitter, I would love to help you 🙂

Discussion (0)

For further actions, you may consider blocking this person and/or reporting abuse

Почему Преттье не форматирует код в VSCODE?

В моем приложении Nuxt, где ESlint и Prettier установлены и включены, я переключился на редактор кода Visual Studio.

Когда я открываю файл .vue, нажимаю CMD + Shift + P и выбираю » Формат документа», мой файл вообще не форматируется.

Мои настройки .prettierrc:

У меня так много строк исходного кода, что я не могу отформатировать их вручную. Что я делаю неправильно?

39 ответов

Как я разобрался после огромного разочарования из-за того, что Prettier перестал работать в VSCode.

Это волшебным образом решило мою проблему.

В зависимости от вашего случая это может вам помочь.

Если выполнение того, что упомянул @Simin Maleki, не решит эту проблему для вас, есть вероятность, что ваш форматтер по умолчанию не установлен:

Убедитесь, что ваш Editor: Default Formatter поле не null скорее esbenp.prettier-vscode и что отмечены все указанные ниже языки. Это устранило мою проблему.

Prettier также может форматировать ваши файлы при сохранении.

Однако установка и включение не приводят к работе.

Вам нужно только настроить форматирование по умолчанию и установить флажок « Форматировать при сохранении» в настройках после установки красивее, чтобы он работал. Не связывайтесь с другими файлами конфигурации.

1 – выберите средство форматирования по умолчанию.

См. изображение ниже;

отключить и включить prettier расширение решает мою проблему

Я не использую Vue, но возникла та же проблема.

У меня уже были настройки

Я не знаю почему Editor: Format on Save установлен в true было недостаточно. Мне нужно было выбрать модуль форматирования по умолчанию, используя описанные выше шаги, чтобы он работал.

Вы можете попробовать добавить этот раздел в свой файл пользовательских настроек?

Я столкнулся с этой проблемой, и эти три шага решили мою проблему:

.prettierrc не требуется, если вы не хотите переопределить настройки VSCode.

prettier.disableLanguages (по умолчанию: [«vue»])

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

Затем я понял, что экспериментально установил Format On Save Mode на modification а не об этом и забыл. Это привело к тому, что в файлах HTML ничего не отформатировалось, и, что удивительно, даже мои изменения. Вернемся к file решил вопрос.

Это то, что сработало для меня (мой форматировщик по умолчанию уже был настроен на Prettier)

Включение «форматирования при сохранении» в VSCode: Настройка >> Пользователь >> Текстовый редактор >> Форматирование у меня сработало!

Если Prettier автоматически форматирует все остальные файлы, кроме файлов HTML, при сохранении:

Нажмите Cmd + P или же Ctrl + P чтобы открыть палитру команд, введите в нее следующий текст:

Нажмите на Preferences: Open Settings (JSON) из раскрывающегося списка предложений. Внутри файла проверьте, существует ли ключ. Если ключ существует и его значение указывает на использование другого расширения форматирования, установленного в Visual Studio Code, вам следует сбросить его, чтобы использовать Prettier.

Например, иногда значение ключа может быть «remimarsal.prettier-now» когда у вас будет установлено расширение Prettier Now.

Если у вас не установлено другое расширение форматирования, кроме Prettier, вы также можете удалить «[html]» ключ в целом от settings.json файл.

если не работает, закройте и снова откройте редактор vscode

Для меня это было связано с ESlint, который также работает с Prettier. Eslint не работал (конфликт локальной установки и глобальной установки), что сломало Prettier.

Когда я щелкнул по этой ссылке, появилось сообщение об ошибке:

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

В моем случае оказалось, что я настроил красивее на использование несуществующего файла конфигурации (см. скриншот ниже). Это было трудно найти, так как не было никакого сообщения об ошибке, но красивое просто не работало. Может, это тоже кому-нибудь поможет.

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

Отметьте этот путь, если здесь есть файлы или папка пуста

C:\Users\ ИМЯ ВАШЕГО ПОЛЬЗОВАТЕЛЯ \.vscode\extensions\esbenp.prettier-vscode-2.2.2\out

Если отсутствует удалить и переустановить красивее

В моем случае пришлось сделать следующее:

и вуаля, все заработало.

СОВЕТ: Чтобы убедиться, что установка прошла успешно, я проверил версию:

Откатился красивее на 1.7.3 и исправил

удалите это правило, и оно должно работать

Как отформатировать код с помощью плагина VScode ESlint

Хорошо, вместо того, чтобы давать руководство по использованию расширения VScode Prettier, я лучше объясню, как полагаться на ESlint и иметь оба мира: проверка правильности кода (ESlint), а затем его форматирование (Prettier).

В чем преимущества этого?

Как добиться такой настройки?

Давайте начнем сначала с установки расширения ESlint и только его, НЕ устанавливайте Prettier.

Я настоятельно рекомендую его для приложений Vue2 (то, что Nuxt работает на сегодняшний день), вы можете найти его ниже. Это позволит быстро и просто ESlint (+ Prettier) любые файлы.

Когда это будет сделано, войдите в ctrl + shift + p (Windows / Linux) или cmd + shift + p (Mac) и введите Preferences: Open Default Settings (JSON)

Там у вас должно получиться что-то вроде этого

Как убедиться, что ваша конфигурация теперь работает?

Чтобы узнать, работает ли мое решение, загрузите этот репозиторий Github, получите последнюю стабильную версию Node (например, 14) и запустите yarn чтобы он работал. В противном случае просто откройте VScode.
Это репо также можно использовать для двойной проверки правильности настройки вашего репозитория, просмотрев там мои файлы!

Как видите, у нас есть несколько вещей, которые может исправить Prettier, но у нас также есть eslint(vue/require-v-for-key) ошибка. Решение доступно в виде комментария чуть ниже, кстати.

PS: если вы хотите иметь встроенные предупреждения / ошибки ESlint, как на скриншоте, вы можете установить Error Lens, это потрясающее расширение, если вы хотите избавиться от ошибок.

Сохраните этот файл, и вы увидите, что все автоматически исправляемые вещи сделаны за вас. Обычно это в основном проблемы с Prettier, но иногда это также может быть ESlint. Поскольку у нас есть правила ESlint от Nuxt, вы также получите несколько хороших передовых практик прямо из коробки!

Тада, работает! Если нет, прочтите раздел в конце моего ответа.

Если вы хотите создать новый проект

Вы можете запустить npx create-nuxt-app my-super-awesome-project и выберите там несколько вещей, самая важная из которых Linting tools: Eslint + Prettier конечно (нажмите пробел, чтобы выбрать один из них).

idahogurl/vs-code-prettier-eslint

Use Git or checkout with SVN using the web URL.

Work fast with our official CLI. Learn more.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

Git stats

Files

Failed to load latest commit information.

README.md

A Visual Studio Code Extension to format JavaScript and TypeScript code using the prettier-eslint package.

Please create an issue before adding a rating. Keep in mind that I work full-time. I’d LOVE to have more contributors. See the Contributing section below.

This extension requires the following NPM packages to be installed either locally or globally:

Note: For earlier versions of Prettier and/or ESLint, see Support for Earlier Versions section

Notes:

The Prettier extension is not required.

The ESLint extension is not required. However, it is needed to have lint errors show while editing your file.

Restart VS Code

With settings listed above, your project should now be setup to automatically format your code when you save. If you run into any problems, check the troubleshooting guide below.

The extension uses your ESLint and Prettier configuration files. These files are resolved starting from the location of the file being formatted, and searching up the file tree until a config file is (or isn’t) found.

ESLint Configuration File

Prettier Configuration File

Prettier uses cosmiconfig for configuration file support. This means you can configure prettier via (in order of precedence):

These projects are setup to work with the VS Code Prettier ESLint extension. Use them to help troubleshoot or as a boilerplate for your project. If you don’t see an example for your tech stack, create a PR of a working example.

Notes:

Most issues are caused by using an unsupported ESLint version or an invalid ESLint configuration.

Running your files through the Prettier ESLint CLI first is a good way to determine if it’s the extension, the prettier-eslint package, or your configuration.

There are known performance issues with quad-core or slower processors. The slowness comes from the prettier-eslint package the extension uses.

Support for Earlier Versions

If you have suggestions for how this extension could be improved, or want to report a bug, open an issue! I’d love all and any contributions. If you are interested in contributing to the project, check out the Contributing Guide.

Thanks goes to these wonderful people (emoji key):

This project follows the all-contributors specification. Contributions of any kind welcome!

About

A Visual Studio Code Extension to format JavaScript and TypeScript code using the prettier-eslint package.

Как настроить VS Code для разработки на React

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

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

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

Языковая поддержка

Когда вы устанавливаете VS Code в первый раз, он предоставит вам множество функций прямо из коробки без использования каких-либо расширений, таких как подсветка синтаксиса для JavaScript и поддержка кода TypeScript и JSX.

Ниже приведён снимок вкладки » Добро пожаловать». Вы всегда можете найти его в меню » Справка «.

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

Расширение языка JavaScript

На вкладке Добро пожаловать в разделе Инструменты и языки щёлкните ссылку JavaScript для установки. Появится запрос на перезагрузку, который вы должны нажать, чтобы новая функция вступила в силу.

Расширение языка JavaScript предоставляет несколько функций, в том числе:

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

На рисунке ниже показан пример использования Intellisense и автоматического импорта в действии.

После установки языковой функции JavaScript VS Code может предложить вам предоставить jsconfig.jsonфайл в корне вашего проекта. В этом нет необходимости, но настройка этого параметра поможет IntelliSense предоставлять более точные подсказки. Вот пример конфигурации:

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

Поддержка TypeScript

TypeScript настоятельно рекомендуется, если вы планируете создавать крупномасштабные и сложные проекты React. Это связано с тем, что TypeScript обеспечивает безопасность типов и, таким образом, снижает вероятность доставки ошибочного кода в ваших интерфейсных приложениях. VS Code обеспечивает поддержку языка TypeScript из коробки, предоставляя ряд функций, таких как:

В TypeScript код JSX записывается с.tsxрасширениями файлов. После компиляции на выходе будет файл с.jsxрасширением.

Обратите внимание, что VS Code не предоставляет компилятор для TypeScript. Вы должны установить его в своей глобальной среде Node.js следующим образом:

В качестве альтернативы вы можете установить расширение Compile Hero Pro, которое предоставляет компилятор для TypeScript и многих других языков, включая:

Расширение предоставляет гораздо больше настраиваемых параметров того, когда и как компилировать ваш TypeScript и код стиля. Если вы хотите узнать больше о настройке React и TypeScript, я рекомендую вам ознакомиться с другой нашей статьёй » React with TypeScript: Best Practices » для более подробного объяснения.

Flow — это альтернатива Facebook для TypeScript. Он предоставляет те же функции, но работает только с проектами React и менее популярен. VS Code не поддерживает его изначально, но вы можете установить расширение Flow Language Support, которое предоставляет ограниченное количество функций, таких как IntelliSense и Rename.

Настройки раскладки клавиатуры

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

На вкладке » Добро пожаловать » в разделе » Настройки и привязки клавиш» вы увидите ссылки для установки сочетаний клавиш для Vim, Sublime, Atom и других. Если вы щёлкните ссылку » Другие «, вы получите полный список раскладок, которые можно установить.

Раньше я был пользователем Atom, прежде чем переключился на VS Code. Настроить раскладку Atom в VS Code так же просто. Это установит для меня расширение Atom Keymap. settings.json Чтобы сделать VS Code более «похожим на атом», требуется следующая конфигурация :

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

Поддержка Emmet JSX

Emmet — это набор инструментов для веб-разработки, который позволяет более эффективно писать HTML-код. Если вы новичок в Эммете, посмотрите демо, чтобы увидеть, как это работает.

VS Code поставляется со встроенным Emmet и уже поддерживает синтаксис JSX. К сожалению, большинство стартовых проектов React используют это.jsрасширение. Проблема в том, что VS Code не распознаёт такие файлы как код React, поэтому функции JSX не активируются. Есть два способа исправить это:

Чтобы получить доступ settings.json, просто перейдите на вкладку верхнего меню и нажмите » Вид» > » Палитра команд«. Введите «настройки», а затем выберите » Настройки«: «Открыть настройки» (JSON). Или вы можете нажать Ctrl+, а Pзатем ввести «settings.json», чтобы быстро открыть файл. Вы также можете использовать ярлык Ctrl+,,чтобы открыть версию пользовательского интерфейса настроек в новой вкладке. Первая иконка в правом верхнем углу откроется, settings.jsonкогда вы нажмёте на неё.

Второй вариант кажется самым простым. К сожалению, это вызывает проблемы с другими инструментами разработки JavaScript, такими как eslint-config-airbnb, в котором есть набор правил, обеспечивающий.jsxрасширение файла для кода React. Отключение этого правила позже вызовет другие проблемы.

Официальный Реагировать команды делать рекомендуется использовать.jsрасширение для React кода. По моему личному опыту, лучше переименовать все файлы с кодом React в.jsxи использовать.jsрасширение для файлов, содержащих простой код JavaScript. Таким образом, у вас будет более простой рабочий процесс со всеми инструментами разработки.

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

Написание высококачественного кода требует написания последовательного кода. Как разработчики мы люди, и очень легко забыть стандарты, которые мы для себя установили. В этом разделе мы рассмотрим основные инструменты, которые помогут нам автоматизировать написание согласованного кода.

EditorConfig

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

VS Code теперь будет соблюдать эти правила для форматирования вашего кода. Давайте быстро поговорим о окончаниях строк. Windows использует CRLFдля обозначения завершения строки, в то время как системы на базе UNIX используют LF. Если вы используете файлы со смешанными окончаниями строк, вы столкнётесь с рядом проблем при фиксации файлов. Вы можете настроить Git на обработку окончаний строк.

Подход, который я предпочитаю, заключается в том, чтобы просто заставить все файлы проекта на любой платформе использовать LFокончания строк. Обратите внимание, что EditorConfigне будет преобразовывать окончания строк для существующих файлов. Он установит только LFдля новых файлов. Чтобы преобразовать все существующие файлы, у вас есть два варианта:

Prettier

Prettier — это программа для форматирования кода, которую проще всего настроить для кода JavaScript. Он поддерживает JavaScript, TypeScript, JSX, CSS, SCSS, Less и GraphQL. Чтобы настроить его, выполните следующие действия:

1. Установите похорошелакод форматера расширения.

2. Убедитесь, что VS Code использует Prettier в качестве средства форматирования по умолчанию. Обновите jsonследующим образом:

5. Обновите json, добавив эту команду в свой scriptsраздел:

Шаги 3–5 вам придётся проделать для каждого проекта, который Prettier должен поддерживать. Теперь вы можете щёлкнуть formatкоманду под npm scriptsпанелью VS Code, как показано на скриншоте ниже.

Как вариант, вы можете просто запустить команду npm run formatPrettier.

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

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

Более красивая конфигурация имеет приоритет в случае конфликта.

HTML в JSX

Любой достойный разработчик знает, что HTML-код, который вы нашли где-то в Интернете, часто копируют и вставляют в свой код React. Для этого часто требуется преобразовать атрибуты HTML в допустимый синтаксис JSX. К счастью, есть расширение под названием html to JSX, которое выполнит преобразование за вас. После его установки вы сможете легко:

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

Реагировать на фрагменты

На торговой площадке VS Code есть множество расширений сниппетов для проектов JavaScript. Для React наиболее популярными являются фрагменты ES7 React / Redux / GraphQL / React-Native. После того, как вы установите этот, вам, вероятно, не нужно будет устанавливать ещё один, так как он содержит более чем достаточно фрагментов, чем вы можете запомнить.

Вот образец фрагментов кода JavaScript:

Приставка

Метод

imp→import moduleName from ‘module’imn→import ‘module’imd→import < destructuredModule >from ‘module’exp→export default moduleNameexd→export < destructuredModule >from ‘module’edf→export default (params) =>nfn→const functionName = (params) =>dob→const = objectToDescruct

Расширение предоставляет множество других фрагментов, относящихся к:

Есть также фрагменты, которые вставляют полные компоненты React. Например, набрав «rfc» и затем нажав, tabвы вставите следующий фрагмент компонента React:

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

Рефакторинг

Написание кода React часто требует написания простых и быстрых операторов для ранней проверки функциональности. Довольно часто возникает необходимость повторно использовать написанный код. Это означает, что вам необходимо извлечь и реорганизовать свой код, чтобы выполнить мантру «напиши один раз, используй везде».

Вы можете потратить время на рефакторинг кода вручную или ускорить процесс с помощью VS Code React Refactor, который поможет вам выполнить рефакторинг кода всего за два шага.

Довольно аккуратно, правда?

Авто Инструменты

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

Автоматическое закрытие тега

Не используя Emmet, расширение Auto Close Tag может помочь вам автоматически закрыть теги JSX. Он также помещает курсор между тегами, как только он закрывается.

Вот небольшая демонстрация расширения в действии:

Автоматическое переименование тега

Когда вы пишете код JSX, вы часто будете переименовывать теги, например,

Linting

Заключение

Подойдя к концу этой статьи, я хотел бы упомянуть, что есть ещё много расширений JavaScript VS Code, которые могут вас заинтересовать. Одно расширение, которое я хотел бы выделить, — это Bracket Pair Colorizer 2. Я нашёл это очень полезным для определения длинных участков блоков кода. Расширение придаёт каждой паре совпадающих скобок разный цвет, что позволяет легко увидеть, где заканчивается один блок кода и начинается другой.

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

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

Я надеюсь, что это руководство поможет вам значительно улучшить скорость кодирования и производительность при разработке проектов React с использованием VS Code.

How to Set Up VS Code Like a Pro in Just 5 Minutes

A beginner’s guide

When you’re a #CodeNewbie starting out on #100DaysOfCode, your Visual Studio Code setup probably leaves a lot to be desired. Here’s how to go from zero to professional web developer by installing and configuring some crucial extensions, themes, and add-ons.

What separates a professional web developer’s VS Code from a brand-new installation is the use of extensions, especially code formatters and linters that automatically detect and fix problems in your code.

Using code formatters (typically Prettier) and linters (usually ESLint) tend to be mandatory when contributing to open-source projects online. But they’re generally awesome to have even if you never plan to work on open-source.

Additionally, a nice theme makes VS Code easier to use, and it makes it feel like your own personal version. Along with a theme, you can add file icons that’ll let you see what type of files you’re working with at just a glance.

In this short tutorial, you’ll take a brand-new VS Code installation and turn it into a super-powered professional setup in about five minutes.

1. Install Extensions in VS Code

I’m going to recommend six must-have extensions, with another seven optional ones. Of course, no extension is really mandatory — it’s your VS Code after all — but everyone should use a code formatter, linter, and theme.

The optional extensions are more for your quality of life. I’d suggest you install all 13 extensions at once since they’re free and quick. You can always disable or uninstall them afterward with just a few clicks inside of VS Code.

First, I’ll list the extensions in both categories, and then I’ll explain the purpose of each one — optional info for the curious folk.

How to install a VS Code extension

There are two ways to install extensions for VS Code, either using the online Visual Studio Marketplace or its equivalent inside VS Code.

From the web: Click on the link to the extension in the text below to open it up in the Visual Studio Marketplace; then click the “Install” button. Assuming you already have VS Code installed, click “Continue.” Your browser will then try to open a vscode link. Choose “Visual Studio Code” from the list, and then check “Remember my choice for vscode links” and click “Open link.”

From VSCode: Alternatively, look up the extension by name inside of VS Code on your computer by clicking the extensions icon on the left-hand activity bar — it looks like blocks getting stacked on top of each other. Search for each extension by name, clicking “Install” for each one.

The recommended extensions below appear in alphabetical order.

Mandatory extensions

Optional extensions

Description of each recommended VS Code extension

If you just want to get set up, and you don’t particularly care about what you just installed, then scroll on past this section as fast as you can! 😂🧨💥

2. Edit ´settings.json´ in VS Code:

Once you’ve installed all of the extensions, you need to configure them for use. That can be a real pain, especially with setting up Prettier.

Thankfully, you can import someone else’s VS Code settings through something called the settings.json file. Here’s how to do it:

My recommended ´settings.json´ file

To copy-paste my settings.json file, click “view raw code” to open the file in your browser as a GitHub gist; you’ll be able to copy the text from there.

I’d also recommend turning on settings sync in VS Code to back up your settings.json file now, though that’s entirely optional and up to you.

How to activate a VS Code theme

In my settings.json file above, I’m using the Monokai Vibrant theme. If you’d like to use something else, you could edit the settings.json file, but I’d recommend just switching to your theme manually. Here’s how to do that:

The new theme will activated and saved in your settings.json file.

Explanation of VS Code ’settings.json’ configuration

Again, if you just want to start using VS Code, and you don’t care to learn obscure VS Code settings, then please scroll on past this section! 😅💻🔥

The below settings show ESLint’s current status and turn HTMLHint on.

The following settings set up your font. Later, I’ll explain installing the free font Fira Code, which features cool programming ligatures. But if you don’t install that font, you’ll just use the VS Code default of Consolas. If you want a font size larger or smaller than 20pt, you can change the setting here.

The setting below turns on word wrap for your word-wrap column setting (80 characters by default). I find it helps make code more readable.

The following settings turn on your theme and file icons.

The following setting enables the use of the Tab key to expand the handy Emmet text snippets for HTML and CSS that are built into VS Code.

Please note javascript.implicitProjectConfig.checkJS was deprecated in favor of js/ts.implicitProjectConfig.checkJS :

Thanks to an alert reader for notifying me of this change to VS Code’s TypeScript settings. As noted in the screenshot, existing jsconfig.json or tsconfig.json files will override this setting.

😴 Wow, bored yet? Thankfully, you’re actually all set up with VS Code already if you used my exact settings.json file. I hope you like it! 👍

The last part of the article is optional.

I’ll talk about configuring Prettier, installing a cool font with font ligatures, and setting up a better terminal inside of VS Code (for Windows users).

Use Prettier to Remove Semicolons (Optional but Recommended):

I’m an advocate for turning off semicolons when programming in JavaScript. Coming from Ruby, which doesn’t use semicolons, I find them unnecessary. Thankfully, whether or not you care to use semicolons, Prettier will automatically add or remove them for you on every line — no sweat.

When collaborating with others, you should use an explicit Prettier configuration file in order to make your code’s formatting match exactly with theirs. For example, if you opened up someone else’s file and removed all of their semicolons, they’d probably be mad at you.

I’d also point out that the online development tool CodeSandbox comes with Prettier installed on every project. Every web developer should know how Prettier works, even if you choose not to use it.

Add Fira Code Font and Font Ligatures (Optional but Recommended):

Fira Code is an awesome free font that comes with something called font ligatures. Font ligatures are little icons that replace other characters.

The settings.json file already assumes you’ve installed Fira Code (specifically the Semi Bold variant) and want font ligatures to be enabled. You’re free to skip this section if you don’t want those things.

1. Download Fira Code from the Fira Code GitHub repository by looking for the releases.

3. Installation instructions differ for Mac OS versus Windows.

On Mac OS, browse to the downloaded ttf folder (such as \Downloads\Fira_Code_v5.2\ttf ). Select all of the font files; then right-click and select “Open” (or equivalently “Open With Font Book”). Select “Install Font.”

On Windows 10, browse to the downloaded ttf folder (such as \Downloads\Fira_Code_v5.2\ttf ). You’ll need to unblock each font file before installing it because of a Windows security precaution. To do so, right-click each font file, click “Properties,” and then check “Unblock” next to “Security” at the bottom of the General tab. (See the screenshot below.) Click “OK,” and then you’ll be able to actually install the font. Repeat the process of unblocking for each font file (six times total). Then, to install the fonts on Windows, you need to select all of the font files. Right-click on the selected files, and then choose Install.

Don’t forget you can change the font settings in VS Code. You can edit the settings.json file, or you can open up the VS Code settings normally and type “font” in the search bar. Similarly, you can search for “word wrap.”

Windows Only: Install Cmder as Your VS Code Terminal (Optional)

Mac and Linux users are going to have a great code-terminal experience out of the box, but Windows users should take a few more steps here. I recommend you download and install Cmder, a fantastic code terminal.

When you go to download Cmder, I suggest grabbing the Git for Windows version, which will automatically install all those fun Git tools into your terminal with no further configuration required.

Once installed, the Cmder wiki has detailed instructions for setting up Cmder as your terminal inside of VS Code. It takes a few minutes, but you’ll have a seamless, professional development environment with a built-in terminal.

Conclusion: Setting Up VS Code for Beginners

I genuinely wish I had this guide when I first started to use VS Code. Instead, I’ve had to compile these settings over the last year from real-world work, courses, and just using VS Code as my text editor on a daily basis.

Thankfully, because I recently needed to configure a new computer, you now have this beginner’s guide to setting up VS Code like a professional. I hope you find these extensions and settings to be useful.

The last thing I would mention to a brand-new software engineer is that, honestly speaking, a graphical program (also called a GUI) can make Git much easier to use than doing everything from the command line.

Personally, I use GitHub Desktop, which is available for both Windows and Mac (but not for Linux). If you’d rather use a host other than GitHub for your Git repository, then check out the official list of Git GUI programs.

ember-tooling / prettier-vscode Goto Github PK

Visual Studio Code extension for Prettier (For Handlebars)

License: MIT License

TypeScript 89.98% JavaScript 9.13% PHP 0.77% Handlebars 0.13%

prettier-vscode’s Introduction

Prettier Formatter for Visual Studio Code (For Handlebars)

Can also be installed in VS Code: Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.

To install prettier in your project and pin its version as recommended, run:

Configuring Default Options

Some users may not wish to create a new Prettier config for every project or use the VS Code settings. Because Prettier searches recursively up the file path, you can place a global prettier config at

/.prettierrc to be used as a fallback.

You can also use the setting prettier.configPath to provide a global configuration. However, be careful, if this is set this value will always be used and local configuration files will be ignored.

Visual Studio Code Settings

You can use VS Code settings to configure prettier. Settings will be read from (listed by priority):

Using Command Palette (CMD/CTRL + Shift + P)

Visual Studio Code provides default keyboard shortcuts for code formatting. You can learn about these for each platform in the VS Code documentation.

If you don’t like the defaults, you can rebind editor.action.formatDocument and editor.action.formatSelection in the keyboard shortcuts menu of vscode.

Respects editor.formatOnSave setting.

You can turn on format-on-save on a per-language basis by scoping the setting:

Format selection works on several languages depending on what Prettier itself supports. The following languages currently are supported:

There are two ways to use Prettier and linters together. The first approach is to simply let each tool do what it was meant for: Prettier formats and the linter lints. You do this by disabling any rules in your linter that check formatting and let Prettier automatically handle all the formatting. The second approach is to use the linter to run prettier through a plugin with the linter.

Disable Formatting Rules in the Linter

The easiest and recommended way of integrating with linters is to let Prettier do the formatting and configure the linter to not deal with formatting rules. You can find instructions on how to configure each linter on the Prettier docs site. You can then use each of the linting extensions as you normally would.

You can enable Auto-Fix on Save for ESLint, TSLint or Stylelint and still have formatting and quick fixes:

NOTE: If you are seeing conflicts between Prettier and ESLint this is because you don’t have the right ESLint or TSLint rules set as explained in the Prettier documentation.

Run Prettier through Linters

Another option to run Prettier and linters together is to have the linters run Prettier. For these configurations you DO NOT USE THIS EXTENSION. Instead you use the linter extensions to run the linter and Prettier. See the Prettier documentation for instructions on how to configure each linter. This setup is generally not recommended, but can be useful in certain circumstances. To learn about why you probably should avoid this setup see the prettier documentation.

Disable format on save so this extension doesn’t run and enable code actions to run the linters on save.

The default values of these configurations are always to their Prettier 2.0 defaults. In order to use defaults from earlier versions of prettier you must set them manually using your VS Code settings or local project configurations.

These settings are specific to VS Code and need to be set in the VS Code settings file. See the documentation for how to do that.

prettier.enable (default: true )

Controls whether prettier is enabled or not. You must restart VS Code when you change this setting.

prettier.requireConfig (default: false )

Note, if this is set, this value will always be used and local ignore files will be ignored.

Supply a custom path to the prettier configuration file.

Note, if this is set, this value will always be used and local configuration files will be ignored. A better option for global defaults is to put a

/.prettierrc file in your home directory.

prettier.resolveGlobalModules (default: false )

When enabled, this extension will attempt to use global npm or yarn modules if local modules cannot be resolved.

NOTE: This setting can have a negative performance impact, particularly on Windows when you have attached network drives. Only enable this if you must use global modules. It is recommended that you always use local modules when possible.

A list of languages IDs to disable this extension on.

Note: Disabling a language enabled in a parent folder will prevent formatting instead of letting any other formatter to run

prettier.useEditorConfig (default: true )

prettier.withNodeModules (default: false )

Whether or not to process files in the node_modules folder.

Failed to load module. If you have prettier or plugins referenced in package.json, ensure you have run npm install

Your project is configured to use an outdated version of prettier that cannot be used by this extension. Upgrade to the latest version of prettier.

You must upgrade to a newer version of prettier.

Русские Блоги

vscode создание среды vue + настройка eslint и prettier

1. Установите Node.js, cnpm, webpack, vue-cli.

1. Установите Node.js:

2. Установите cnpm (быстрее, чем npm, потому что он использует сервер Taobao в качестве источника пакета):

3. Установите webpack (сборщик модулей статических модулей для js приложений):

4. Установите vue-cli (инструмент, используемый для создания шаблонов vue):

Во-вторых, создайте новый проект vue в cmd для тестирования

2. Введите команду: vue init webpack testDemo, чтобы создать новый проект. (Лучше не использовать прописные буквы, в противном случае первый запрос подскажет, что имя проекта не может иметь прописные буквы, и требуется имя в нижнем регистре).

Введите первый и заполните вторые два без ответа (поскольку cnpm будет использоваться для загрузки зависимостей позже, npm работает слишком медленно). Для последнего изначально было выбрано «Да, использовать NPM» (выбран синий цвет), с помощью клавиши со стрелкой вниз выберите третий (как показано на рисунке) и нажмите Enter.

3. После этого предложение будет отображаться, как показано ниже (измените все npm внутри на cnpm, а затем выполните одно за другим, иначе npm будет слишком медленным)

4. Следуя подсказкам, зайдите в браузер по адресу http: // localhost: 8080. Успешный доступ означает успешный тест.

Три, установить vscode, плагин vetur, плагин eslint, плагин красивее

1. Плагин устанавливается через расширения слева (расширения слева можно открыть с помощью сочетания клавиш Crtl + Shift + X). После установки трех плагинов перезапустите vscode.

Измените файл setting.json следующим образом:

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

Перезапустите (? Может потребоваться) vscode, чтобы он вступил в силу. (На самом деле, щелчок правой кнопкой мыши по vscode имеет «форматированный документ»)

В-четвертых, запустите проект vue в vscode

2. Откройте Терминал (вы можете открыть Терминал-> Новый Терминал на верхней панели инструментов)

3. Введите команду: cnpm install, чтобы проверить и загрузить зависимости. (Я столкнулся с множеством проблем на этом этапе, и я объясню проблемы и решения, с которыми я столкнулся в конце статьи)

4. Введите команду: cnpm run dev, чтобы запустить проект.

5. Следуя подсказкам, зайдите в браузер по адресу http: // localhost: 8080.

В-пятых, ямы, возникающие при использовании cnpm

решение

1. Найдите Windows PowerShell в поле поиска win10 и запустите его от имени администратора.

2. Введите команду: set-executjionpolicy remotesigned. (К сожалению, на этом этапе есть еще одна проблема. Я забыл сделать снимок экрана, когда сообщил об ошибке. Вероятно, это означает, что эта команда не может быть запущена. См. Следующий шаг для решения.) (Если вы можете успешно выполнить этот шаг, перейдите к шагу 4)

3. Решите проблему на шаге 2 (см. Шаг 4, если на шаге 2 проблем нет): введите команду в cmd: get-help set-executionpolicy. После выполнения этой команды попробуйте запустить ее в PowerShell в 2. Если это удастся, перейдите к шагу 4.

4. Измените права доступа на A. Введите команду: Ge-ExecutionPolicy.

Настройка проекта TypeScript с помощью ESLint, Prettier и VS Code

TypeScript сегодня является одним из самых популярных языков благодаря удобству и надежности его системы набора текста.

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

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

Короткий путь

Вы можете найти окончательный вариант настройки проекта в этом репозитории GitHub и клонировать его:

1. Настройка проекта

Инициализируйте новый репозиторий:

mkdir typescript-starter && cd typescript-starter && npm init

Добавьте намеренно плохо отформатированный файл-образец в src/index.ts :

2. Конфигурация ESLint

Установите ESLint, его плагин Typescript и соответствующий парсер:

3. Конфигурация Prettier

eslint-config-prettier гарантирует отсутствие конфликтов между ESLint и Prettier, поскольку он отключает правила ESLint, которые могут создавать проблемы.

Отредактируйте конфигурацию ESLint так, чтобы значение «extends” выглядело следующим образом:

4. Следите за магией!

Вернитесь к файлу index.ts и пересохраните его.

Если все прошло по плану, ваш файл должен был быть отформатирован при сохранении, а ESLint должен был автоматически исправить все, что мог! У вас осталась ошибка в const book :

Теперь вам предстоят часы перепечатки!

Но если вы готовы довериться магии, то выполните следующие шаги:

Почему Prettier не форматирует код в VS Code?

В моем приложении Nuxt, где установлены и включены ESlint и Prettier, я переключился на Visual Studio Code.

Мои .prettierrc настройки:

У меня так много строк исходного кода, что я не могу их форматировать вручную. Что я делаю неправильно?

30 ответов

Как я разобрался после огромного разочарования из-за того, что Prettier перестал работать в VSCode.

Это волшебным образом решило мою проблему.

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

Отметьте этот путь, если здесь есть файлы или папка пуста

Если отсутствует удалить и переустановить красивее

Prettier также может форматировать ваши файлы при сохранении.

Однако установка и включение не приводят к работе.

Вы должны проверить «форматирование при сохранении» в VSCode: Настройка >> Пользователь >> Текстовый редактор >> Форматирование

Откатился красивее на 1.7.3 и поправил

ПОШАГОВАЯ ПРОГУЛКА

Также убедитесь, что форматирование при сохранении включено:

Отключить и включить расширение prettier решает мою проблему

Я не использую Vue, но возникла та же проблема.

У меня уже были настройки

Я столкнулся с этой проблемой, и эти три шага решили мою проблему:

Вы можете попробовать добавить этот раздел в свой файл VS Code settings.json?

prettier.disableLanguages (по умолчанию: [«vue»])

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

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

При нажатии на этот статус панель вывода должна сообщить о проблеме в файле HTML. Для меня проблема заключалась в том, что у меня был div внутри тега p, против которого, как я полагаю, выступают соглашения prettier / VSCode. Когда я удалил его (и в сочетании со всеми вышеперечисленными настройками, а именно форматирование по умолчанию и формат при сохранении ), я стал работать красивее.

.prettierrc не требуется, если вы не хотите переопределить настройки VSCode.

Затем я понял, что экспериментально установил для Формат в режиме сохранения значение modification вместо file и забыл об этом. Это привело к тому, что в файлах HTML ничего не отформатировалось, что удивительно даже с моими изменениями. Установка его обратно на file решила проблему.

Включение «форматирования при сохранении» в VSCode: Настройка >> Пользователь >> Текстовый редактор >> Форматирование сработало для меня! 🙌

Если не работает, закройте и снова откройте редактор vscode

Если Prettier автоматически форматирует все остальные файлы, кроме файлов HTML, при сохранении:

Это то, что сработало для меня (мой форматировщик по умолчанию уже был настроен на Prettier)

Setting up TypeScript with ESLint & Prettier for Visual Studio Code

Okay, if you’ve stumbled on this article, chances are you probably want this information as quick and easy as possible.

I’ll keep things as short as I can, but we will be walking through everything step-by-step.

Here’s a quick introduction on what everything is that we’ll be setting up today:

Prefer video?

The video is part of a completely free 16 part series available to watch for free over on my YouTube channel. Click here to get the full course!

There are other ways to get up and running with these tools quickly (such as running an npx command, pre-installing everything).

Here’s why I think you should follow this (longer) guide instead:

Just want the code?

If it’s useful, I’d appreciate a star! ✨

Still here? Alright! On with the show!

Installing TypeScript

Step 1: We’ll start by creating a new folder to use as a root for our project. In your command line, enter the following command (replacing my-new-project with your project’s name):

Exit fullscreen mode

Step 2: Next, we need to get our project set up using Yarn. To do this, we’ll need to enter the folder we’ve just created and initialise our project.

Exit fullscreen mode

This should give us an interactive series of steps where we can enter all the relevant information for our project in.

Enter values for all of these if you have anything specific, or just press Enter to use the defaults for each (shown in parentheses after each question).

Step 3: Okay, now that we’ve initialised our project, let’s go ahead and install TypeScript into our project.

Using the same command line (still navigated to the my-new-project directory), enter the following command:

Exit fullscreen mode

Step 4: After that’s installed, we’ll need to create ourselves a configuration file for TypeScript to use.

To create that, enter the following command:

Exit fullscreen mode

Step 5: Next, we’ll create a folder to store our TypeScript files in, and create an index.ts file to get started. Back in your command line, enter the following:

Exit fullscreen mode

Step 6: Next, you’ll want to open up the tsconfig.json file that we just created, using VSCode.

Exit fullscreen mode

Note: If you’re planning on setting this project up with React later down the line, there’s a React-specific barebones tsconfig.json you can refer to here

For more information on tsconfig.json and all of the possible parameters you can use during setup, there’s more information on the official TypeScript handbook..

To build your TypeScript into JavaScript files, simply run the following command from the root directory:

Exit fullscreen mode

ESLint

Alright, let’s get our codebase linted with ESLint!

Step 1: First, we’ll want to install the relevant ESLint plugin for VSCode. Simply search for ESLint in the Extensions bar on the left side of the screen, then hit Install to install it.

Step 2: Open up your command line once again, and navigate to your project’s root directory. From there, we want to install all the required libraries to get ESLint up and running.

To do so, enter the following command:

Exit fullscreen mode

This will install:

Step 3: Next, whilst we’re still in the command line, we’ll need to set up our configuration file for ESLint.

To do so, enter the following command:

Exit fullscreen mode

Here’s what that looks like on Visual Studio Code:

Exit fullscreen mode

This configuration applies all of the libraries that we’ve just installed.

Step 5: Restart VSCode!

Step 6: You should now be able to observe an ESLint marker in the status bar (bottom right corner of the screen).

However, if it looks like this:

. you’ll need to click it, and then grant the workspace the necessary permissions to use ESLint. After that, one last IDE restart should get you up and running!

Prettier

Almost there! Let’s get our environment configured to use Prettier.

Step 1: Once again, open up your command line, and navigate to your project’s root directory. We’ll be installing a few new packages to add support for Prettier.

Exit fullscreen mode

(Note: The order in which the content of the extends array is very important to ensure you don’t have any trouble later on down the line!)

Summary

It feels like a hell of a lot to do just to get your environment ready, but I honestly believe that once you’ve gone through this process once and have an understanding as to how all the separate components come together, it really makes things a lot more straightforward in the event that any of these tools fail. Now that you’ve braved the storm, you should also be in a great position to customise ESLint and Prettier to your heart’s content.

One last thing.

prettier / prettier-vscode Goto Github PK

Visual Studio Code extension for Prettier

License: MIT License

prettier-vscode’s Introduction

Prettier Formatter for Visual Studio Code

JavaScript · TypeScript · Flow · JSX · JSON
CSS · SCSS · Less
HTML · Vue · Angular HANDLEBARS · Ember · Glimmer
GraphQL · Markdown · YAML
Your favorite language?

Can also be installed in VS Code: Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.

The following will use Prettier for all languages except Javascript.

The following will use Prettier for only Javascript.

Additionally, you can disable format on save for specific languages if you don’t want them to be automatically formatted.

To install prettier in your project and pin its version as recommended, run:

NOTE: You will be prompted to confirm that you want the extension to load a Prettier module. This is done to ensure that you are not loading a module or script that is not trusted.

Configuring Default Options

Visual Studio Code Settings

You can use VS Code settings to configure prettier. Settings will be read from (listed by priority):

Using Command Palette (CMD/CTRL + Shift + P)

Visual Studio Code provides default keyboard shortcuts for code formatting. You can learn about these for each platform in the VS Code documentation.

If you don’t like the defaults, you can rebind editor.action.formatDocument and editor.action.formatSelection in the keyboard shortcuts menu of vscode.

Respects editor.formatOnSave setting.

You can turn on format-on-save on a per-language basis by scoping the setting:

Format selection works on several languages depending on what Prettier itself supports. The following languages currently are supported:

Format Document (Forced)

The default values of these configurations are always to their Prettier 2.0 defaults. In order to use defaults from earlier versions of prettier you must set them manually using your VS Code settings or local project configurations.

These settings are specific to VS Code and need to be set in the VS Code settings file. See the documentation for how to do that.

prettier.enable (default: true )

Controls whether prettier is enabled or not. You must restart VS Code when you change this setting.

prettier.requireConfig (default: false )

Note, if this is set, this value will always be used and local ignore files will be ignored.

Disabled on untrusted workspaces

Supply a custom path to the prettier configuration file.

Note, if this is set, this value will always be used and local configuration files will be ignored. A better option for global defaults is to put a

/.prettierrc file in your home directory.

Disabled on untrusted workspaces

prettier.resolveGlobalModules (default: false )

When enabled, this extension will attempt to use global npm or yarn modules if local modules cannot be resolved.

NOTE: This setting can have a negative performance impact, particularly on Windows when you have attached network drives. Only enable this if you must use global modules. It is recommended that you always use local modules when possible.

Note: Disabling a language enabled in a parent folder will prevent formatting instead of letting any other formatter to run

Disabled on untrusted workspaces

prettier.useEditorConfig (default: true )

Disabled on untrusted workspaces (always false)

prettier.withNodeModules (default: false )

Whether or not to process files in the node_modules folder.

Disabled on untrusted workspaces

Failed to load module. If you have prettier or plugins referenced in package.json, ensure you have run npm install

Your project is configured to use an outdated version of prettier that cannot be used by this extension. Upgrade to the latest version of prettier.

You must upgrade to a newer version of prettier.

This workspace is not trusted. Using the bundled version of prettier.

You must trust this workspace to use plugins and local/global modules. See: Workspace Trust

prettier-vscode’s People

Contributors

Stargazers

Watchers

Forkers

prettier-vscode’s Issues

Getting `Cannot read property ‘prettier’ of undefined` message

Hi,
Everything was working fine but then suddenly I began to receive the error message Cannot read property ‘prettier’ of undefined when trying to format the code. The only difference I remember is that I updated my VSCode extensions.
I uninstalled the extension, reload and the reinstalled again the extension but he problem remains.

I have VSCode 1.11.1 installed on Mac OSX 10.11.6 (El Capitan).

[Fixed in [email protected] ] Unexpected whitespace added in JSX

Create option to ignore files (like webpack.config.js)

Hi! I’d love to have an option to include / exclude paths or files so that my webpack.config.js doesn’t get ruined everytime I save the file

Peer dependency or similar behaviour

Is there any way that we dont need to wait this package updated to have a new version of prettier?

Maybe the extension can check if prettier is installed in the user node_modules?

Instructions to change settings for Prettier

In the README Settings section, it mentions different settings such as singleQuote, printWidth etc. that can be changed for Prettier. How/where do I set these settings?

Extension should ask to user to install prettier npm module is not exist

-g requires sudo for me, otherwise I think the extension could just install it automatically, ex. the golang extension.

Formatting is worse than using the CLI Tool

Description

I have a JSX File that I want to be prettier. I compare prettier CLI and your vscode plugin.

Expected

It looks the same in CLI and vscode plugin

Actual

It looks different

Configuration:

Versions

prettier: 0.22.0
vscode: 1.11.1
plugin: 0.12.0

Vs code prettier настройка

Prettier Formatter for Visual Studio Code

JavaScript · TypeScript · Flow · JSX · JSON
CSS · SCSS · Less
HTML · Vue · Angular HANDLEBARS · Ember · Glimmer
GraphQL · Markdown · YAML
Your favorite language?

Can also be installed in VS Code: Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.

The following will use Prettier for all languages except Javascript.

The following will use Prettier for only Javascript.

Additionally, you can disable format on save for specific languages if you don’t want them to be automatically formatted.

To install prettier in your project and pin its version as recommended, run:

NOTE: You will be prompted to confirm that you want the extension to load a Prettier module. This is done to ensure that you are not loading a module or script that is not trusted.

Configuring Default Options

Visual Studio Code Settings

You can use VS Code settings to configure prettier. Settings will be read from (listed by priority):

Using Command Palette (CMD/CTRL + Shift + P)

Visual Studio Code provides default keyboard shortcuts for code formatting. You can learn about these for each platform in the VS Code documentation.

If you don’t like the defaults, you can rebind editor.action.formatDocument and editor.action.formatSelection in the keyboard shortcuts menu of vscode.

Respects editor.formatOnSave setting.

You can turn on format-on-save on a per-language basis by scoping the setting:

Format selection works on several languages depending on what Prettier itself supports. The following languages currently are supported:

Format Document (Forced)

The default values of these configurations are always to their Prettier 2.0 defaults. In order to use defaults from earlier versions of prettier you must set them manually using your VS Code settings or local project configurations.

These settings are specific to VS Code and need to be set in the VS Code settings file. See the documentation for how to do that.

prettier.enable (default: true )

Controls whether prettier is enabled or not. You must restart VS Code when you change this setting.

prettier.requireConfig (default: false )

Note, if this is set, this value will always be used and local ignore files will be ignored.

Disabled on untrusted workspaces

Supply a custom path to the prettier configuration file.

Note, if this is set, this value will always be used and local configuration files will be ignored. A better option for global defaults is to put a

/.prettierrc file in your home directory.

Disabled on untrusted workspaces

prettier.resolveGlobalModules (default: false )

When enabled, this extension will attempt to use global npm or yarn modules if local modules cannot be resolved.

NOTE: This setting can have a negative performance impact, particularly on Windows when you have attached network drives. Only enable this if you must use global modules. It is recommended that you always use local modules when possible.

Note: Disabling a language enabled in a parent folder will prevent formatting instead of letting any other formatter to run

Disabled on untrusted workspaces

prettier.useEditorConfig (default: true )

Disabled on untrusted workspaces (always false)

prettier.withNodeModules (default: false )

Whether or not to process files in the node_modules folder.

Disabled on untrusted workspaces

Failed to load module. If you have prettier or plugins referenced in package.json, ensure you have run npm install

Your project is configured to use an outdated version of prettier that cannot be used by this extension. Upgrade to the latest version of prettier.

You must upgrade to a newer version of prettier.

This workspace is not trusted. Using the bundled version of prettier.

You must trust this workspace to use plugins and local/global modules. See: Workspace Trust

Как настроить VS Code для увеличения продуктивности

Перевод статьи «How to set up VSCode to improve your productivity».

С течением времени редакторы кода существенно улучшились. Еще несколько лет назад Visual Studio Code (VS Code) вообще не существовало. Вы, вероятно, пользовались Sublime Text, Atom, Bracket и т. п. Но теперь VS Code стал любимым редактором большинства разработчиков.

Почему VS Code?

Любви разработчиков к этому редактору способствуют (среди прочих) такие его особенности:

Теперь, когда вы знаете о преимуществах использования VS Code, давайте рассмотрим, как его настроить и какие расширения установить, чтобы использовать этот редактор максимально эффективно. (Примечание редакции: в статье приводятся советы для macOS, но многие из них универсальны. Для вызова палитры команд вместо CMD + SHIFT + P можно использовать CTRL + SHIFT + P).

Терминал

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

После конфигурации Zsh (для основного терминала) запустите встроенный в VS Code терминал Terminal > New Terminal и введите команду

Шрифт

Благодаря поддержке лигатур хорошо смотрится FiraCode. Скачайте и установите этот шрифт, а затем добавьте его в ваш файл settings.json. (Примечание редакции: для доступа к файлу выберите в палитре команд Open Settings (JSON)).

[code]»editor.fontFamily»: «Fira Code»,
«editor.fontLigatures»: true,[/code]

Запуск из командной строки

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

Конфигурация VS Code не зависит от рабочего окружения и содержится в файле settings.json. Вы можете внести изменения в этот файл, чтобы ваш VS Code больше соответствовал вашим предпочтениям.

Скопируйте и вставьте этот код в файл settings.json:

[code] <
«editor.multiCursorModifier»: «ctrlCmd»,
«editor.formatOnPaste»: true,
«editor.wordWrap»: «bounded»,
«editor.trimAutoWhitespace»: true,
«editor.fontFamily»: «Fira Code»,
«editor.fontLigatures»: true,
«editor.fontSize»: 14,
«editor.formatOnSave»: true,
«files.autoSave»: «onFocusChange»,
«emmet.syntaxProfiles»: <
«javascript»: «jsx»
>,
«eslint.autoFixOnSave»: true,
«eslint.validate»: [
«javascript»,
«javascriptreact»
],
«javascript.validate.enable»: true,
«git.enableSmartCommit»: true,
«files.trimTrailingWhitespace»: true,
«editor.tabSize»: 2,
«gitlens.historyExplorer.enabled»: true,
«diffEditor.ignoreTrimWhitespace»: false,
«workbench.sideBar.location»: «right»,
«explorer.confirmDelete»: false,
«javascript.updateImportsOnFileMove.enabled»: «always»,
>[/code]

Расширения

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

Чтобы найти эти расширения,

1. Auto Import

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

2. Add jsdoc comments

Это расширение добавляет блок комментариев к коду. Чтобы его использовать, выделите первую строку функции, нажмите CMD + SHIFT + P и выберите Add Doc Comments.

3. ESDoc MDN

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

4. CSS Peek

Как следует из названия (peek – «заглянуть»), это расширение помогает вам просмотреть правила, задействованные при применении определенного стиля в кодовой базе. Это бывает удобно при работе с legacy-кодом.

5. GitLens

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

6. ESLint

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

Для локальной установки запустите

[code]npm install eslint[/code]

а для глобальной –

– в случае глобальной инсталляции.

7. Debugger for Chrome

С его помощью вы сможете осуществлять отладку вашего JavaScript-кода прямо из браузера Google Chrome.

8. Google Fonts

С помощью этого расширения облегчается установка шрифтов Google. Больше не придется искать их в браузере. Чтобы получить список шрифтов, нажмите CMD + SHIFT + P и поищите Google fonts.

9. TODO Highlight

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

10. Docker

Благодаря этому расширению вы сможете на лету создавать Dockerfiles. Также предоставляется подсветка синтаксиса, intellisense и многое другое.

Нажмите CMD + SHIFT + P и поищите Add Docker files to workspace.

11. Code Spellchecker

Это расширение позволяет с легкостью находить опечатки в коде.

12. Import Cost

Import Cost показывает, как импортируемые пакеты влияют на код. Это позволяет оценивать проблемы с производительностью.

13. HTMLHint

Это расширение проверяет ваш HTML, помогая вам писать код, совместимый со стандартами.

14. Peacock

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

После установки Peacock кликните на иконке настроек > settings, выберите вкладку настроек рабочего пространства, кликните на <> и вставьте следующий код:

[code] <
«workbench.colorCustomizations»: <
«activityBar.background»: «#e90b8d»,
«activityBar.foreground»: «#fff»,
«activityBar.inactiveForeground»: «#b5b5b5»,
>,
«peacock.affectedElements»: [
«activityBar»,
]
>[/code]

Также можно добавить titleBar и statusBar в affectedElements и настрйоки цвета для них в разделе colorCustomizations.

Чтобы использовать один из дефолтных цветов, нажмите CMD + SHIFT + P, введите peacock и выберите тему по своему вкусу. Это перезапишет настройки цвета в файле settings.json для данного рабочего пространства.

15. Prettier

При написании кода все время приходится набирать пробелы или табы? На помощь вам придет Prettier. Это расширение форматирует строки кода и делает код читаемым.

Setting Prettier on a React Typescript project (2022)

Prettier helps to maintain the code within some formatting rules like indentation, double or single quotes when using string, etc.

On this tutorial, I will show you how to setup and run over a React Typescript project.

Prerequisites

Note: You need Node version >= 10 installed. So, if you don’t have it, please go to nodejs website, download and install it on your local machine. (https://nodejs.org/en/)

Step 1: Create a React Project with Typescript

The following command will create a project inside a folder my-app.

Step 2: Install Prettier package

Inside the project directory, open a terminal.

On terminal, run:

Step 3: ‘prettierrc.json’ file

Create a ‘. prettierrc.json’ file and add some prettier rules:

Step 4: ‘.prettierignore’ file

Step 5: Running Prettier

Inside the project directory, open a terminal.

To run Prettier and format the code, just run:

Step 5.1: Let’s Run!

On the project that we create, let’s run prettier over the file App.tsx.

Note: To run Prettier over all files in the project, just run the follow command:

Conclusion

So, with these configurations you will improve your code formatting in your ReactJS with Typescript projects. Hope you enjoy! 🙂

VS Code: execute Prettier with auto-fix in a file when save

WARNING: if you intend to use Prettier together with some Linter (like ESLint), I would not recommend to go through this step and setup the auto-fix using just the Prettier rules when save, BUT using both Prettier and the Linter rules. Here there is an example of setting up auto-fix when saving a file using Prettier + ESLint rules.

As a plus, I will show you how to configure auto-fix on VS Code, but is an optional step, if you want to run prettier with auto-fix every time you save your code.

You can go to ‘ Extensions’ section and install it manually

Or launch VS Code Quick Open (Ctrl+P) AND Run the following command:

Done! Now every file saved will be formatted within the Prettier formatting rules.

SimonSiefke/prettier-vscode

Use Git or checkout with SVN using the web URL.

Work fast with our official CLI. Learn more.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

Git stats

Files

Failed to load latest commit information.

README.md

Prettier for VSCode

For best editing experience, the following settings are recommended:

JavaScript, TypeScript, Flow, JSX, JSON, CSS, SCSS, Less, HTML, Vue, Angular, GraphQL, Markdown, YAML, C#, Elm, Java, Twig, Handlebars, XML, Svelte, Php

About

VSCode Extension for Prettier.

Topics

Resources

License

Stars

Watchers

Forks

Releases

Packages 0

Contributors 3

Languages

Footer

You can’t perform that action at this time.

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.

teambition/vscode-prettier-standard

Use Git or checkout with SVN using the web URL.

Work fast with our official CLI. Learn more.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

Git stats

Files

Failed to load latest commit information.

README.md

Prettier formatter for Visual Studio Code

VS Code package to format your Javascript using Prettier and Standard.

Can also be installed using

Using Command Palette (CMD/CTRL + Shift + P)

About

Visual Studio Code Plugin for Prettier Standard

Resources

License

Stars

Watchers

Forks

Releases

Packages 0

Languages

Footer

You can’t perform that action at this time.

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.

Vs code prettier настройка

Copy raw contents

This is a fork of prettier/prettier, with a goal of supporting additional options not picked up by official Prettier.

If you want to add an option to Prettier Miscellaneous, please send a PR! 😃

Prettier is an opinionated code formatter with support for:

It removes all original styling* and ensures that all outputted code conforms to a consistent style. (See this blog post)

What does Prettier do?

Prettier takes your code and reprints it from scratch by taking the line length into account.

For example, take the following code:

It fits in a single line so it’s going to stay as is. However, we’ve all run into this situation:

Suddenly our previous format for calling function breaks down because this is too long. Prettier is going to do the painstaking work of reprinting it like that for you:

Prettier enforces a consistent code style (i.e. code formatting that won’t affect the AST) across your entire codebase because it disregards the original styling* by parsing it away and re-printing the parsed AST with its own rules that take the maximum line length into account, wrapping code when necessary.

*Well actually, some original styling is preserved when practical—see empty lines and multi-line objects.

If you want to learn more, these two conference talks are great introductions:

Building and enforcing a style guide

By far the biggest reason for adopting Prettier is to stop all the on-going debates over styles. It is generally accepted that having a common style guide is valuable for a project and team but getting there is a very painful and unrewarding process. People get very emotional around particular ways of writing code and nobody likes spending time writing and receiving nits.

Prettier is usually introduced by people with experience in the current codebase and JavaScript but the people that disproportionally benefit from it are newcomers to the codebase. One may think that it’s only useful for people with very limited programming experience, but we’ve seen it quicken the ramp up time from experienced engineers joining the company, as they likely used a different coding style before, and developers coming from a different programming language.

What usually happens once people are using Prettier is that they realize that they actually spend a lot of time and mental energy formatting their code. With Prettier editor integration, you can just press that magic key binding and poof, the code is formatted. This is an eye opening experience if anything else.

We’ve worked very hard to use the least controversial coding styles, went through many rounds of fixing all the edge cases and polished the getting started experience. When you’re ready to push Prettier into your codebase, not only should it be painless for you to do it technically but the newly formatted codebase should not generate major controversy and be accepted painlessly by your co-workers.

Clean up an existing codebase

Since coming up with a coding style and enforcing it is a big undertaking, it often slips through the cracks and you are left working on inconsistent codebases. Running Prettier in this case is a quick win, the codebase is now uniform and easier to read without spending hardly any time.

2000 module ES6 code base, developed by 20 different developers over 18 months, in a global team. Felt like such a win without much research.

Ride the hype train

Purely technical aspects of the projects aren’t the only thing people look into when choosing to adopt Prettier. Who built and uses it and how quickly it spreads through the community has a non-trivial impact.

A few of the many projects using Prettier:

How does it compare to ESLint (or TSLint, stylelint. )?

Linters have two categories of rules:

Prettier alleviates the need for this whole category of rules! Prettier is going to reprint the entire program from scratch in a consistent way, so it’s not possible for the programmer to make a mistake there anymore 🙂

Prettier does nothing to help with those kind of rules. They are also the most important ones provided by linters as they are likely to catch real bugs with your code!

You can install it globally if you like:

We’re using yarn but you can use npm if you like:

Run Prettier through the CLI with this script. Run it without any arguments to see the options.

In practice, this may look something like:

Don’t forget the quotes around the globs! The quotes make sure that Prettier expands the globs rather than your shell, for cross-platform usage. The glob syntax from the glob module is used.

If you are using ESLint, integrating Prettier to your workflow is straightforward:

Just add Prettier as an ESLint rule using eslint-plugin-prettier.

We also recommend that you use eslint-config-prettier to disable all the existing formatting rules. It’s a one liner that can be added on-top of any existing ESLint configuration.

You can use Prettier with a pre-commit tool. This can re-format your files that are marked as «staged» via git add before you commit.

Install it along with husky:

and add this config to your package.json :

See https://github.com/okonet/lint-staged#configuration for more details about how you can configure lint-staged.

Find more info from here.

Option 3. bash script

Prettier ships with a handful of customizable format options, usable in both the CLI and API.

Valid options:
— «array»
— «object»
— «import»
— «export»
— «arguments»«none»You can use a comma separated string list, or an object in the API.

format is used to format text using Prettier. Options may be provided to override the defaults.

Источники: