Линтер — это слово, обозначающее текстильное волокно, которое остается на одежде после периода строительства. Слово «линтер» происходит от слова «ворс» и используется в качестве инструмента статического анализа кода для ECMAScript/JavaScript. В то время как статический анализ кода инструменты проверяют проекты перед их запуском, инструменты динамического анализа кода проверяют проект во время выполнения. Линтеры могут находить потенциальные уязвимости, ошибки кода и форматирование кода без необходимости запуска кода. Таким образом, это позволяет нам писать чистый код.
Монтаж:
npm init @eslint/config
Эта команда задаст различные вопросы и установит зависимости и настроит проект в соответствии с нашими ответами. Нажмите здесь, чтобы перейти к документации, если вы хотите установить зависимости и настроить проект вручную. быть дома? Я выбрал вариант YAML в вопросе, поэтому он сгенерирует файл конфигурации .eslintrc.yaml.
Когда мы открываем файл .eslintrc.yaml, должен появиться следующий код
env:
browser: true
es2021: true
extends: eslint:recommended
parserOptions:
ecmaVersion: latest
rules:
indent:
- error
- 4
linebreak-style:
- error
- windows
quotes:
- error
- double
semi:
- error
- always
Наконец, давайте добавим приведенный ниже код в файл package.json.
"scripts": {
"lint":"eslint ."
}
Таким образом, командой `npm run lint` eslint проверяет наш проект и записывает ошибки в консоль.
Eslint автоматически может исправить некоторые ошибки, такие как new-line-after-import и semi. Нажмите здесь, чтобы получить доступ к списку правил, которые может исправить eslint». Флаг — fix используется для того, чтобы позволить eslint исправлять ошибки, которые может исправлять eslint. Также есть возможность запускать eslint с флагом — fix после каждой операции сохранения (CTRL+S), выполняя простую настройку в коде VS.
- CTRL+SHIFT+P › Открыть настройки пользователя (JSON)
- Поместите следующий код в открытый файл.
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
Таким образом, eslint исправляет ваш код после каждой операции сохранения (CTRL+S).
Также есть расширение под названием ESLint, которое поможет нам при использовании eslint в VScode. Нажмите здесь, чтобы получить к нему доступ.
Давайте поговорим о правилах поведения на примере. Создайте файл app.js и поместите в него следующий код.
const a = 'hi world' console.log(a)
Первый снимок экрана был создан после команды «npm run lint». После того, как я обновил файл .eslintrc.yaml, как показано ниже, и запустил команду «npm run lint», был создан второй снимок экрана. Правила поведения описывают, как должен действовать eslint при нарушении правила. .Есть три варианта поведения правила.
- off: отключает правило.
- warn: ошибка отображается как предупреждающее сообщение, а не выдается ошибка.
- ошибка: выдает ошибку при нарушении правила. Это поведение отменяет операцию фиксации при использовании перехватчика перед фиксацией.
Мы можем настроить все методы eslint по своему желанию. Существуют библиотеки конфигурации, такие как eslint-config-semistandard или eslint-config-airbnb, которые мы можем использовать, полностью воспользовавшись этими правилами. При установке Eslint мы можем добавить все, что захотим, с помощью флага — config, как показано ниже:
npm init @eslint/config -- --config airbnb
Настройка языковых параметров
Как мы знаем, мы можем использовать JavaScript как для бэкенда, так и для фронтенда. Мы можем решить, какую версию JavaScript использовать из различных стандартных версий, известных как версии ECMAScript. Мы также можем использовать одну из популярных библиотек, таких как Mongo или Jest. С помощью сред конфигурации ESLint мы можем описать нашу рабочую среду, что приведет к более эффективному использованию ESLint.
Например, если мы не активируем опцию «browser:true», код «window.alert(«привет, мир»)» выдаст ошибку.
Примечание. Мы можем избежать ошибок на уровне строки с помощью /eslint-env envName/.
Важные параметры:
- browser: если проект будет работать в браузере, установка значения true позволяет нам получать доступ к таким объектам, как окно или документ.
- node: если установлено значение true, это позволяет нам получить доступ к глобальным переменным Node.js, таким как require.
- commonjs: при использовании таких технологий, как Browserify/WebPack на стороне браузера, установите для него значение true.
- es6: установите значение true, чтобы поддерживать все функции ES6. Он устанавливает для ecmaVersion значение es6. Чтобы включить последнюю версию ECMAScript, мы можем использовать es2024:true.
ESLint — это инструмент статического анализа кода, используемый для ECMAScript/Javascript. Это означает, что мы не можем использовать его для CSS, YAML или HTML. Кроме того, поскольку основной целью ESLint является анализ кода, а не форматирование, он не очень последователен, когда дело доходит до форматирования.
Похорошее
На сегодняшний день самая главная причина для принятия Prettier — прекратить все текущие дебаты по поводу стилей.
Самоуверенный форматировщик кода, разработанный для различных программных технологий. Его можно использовать для JS, Angular, Vue, TypeScript, CSS, LESS, HTML, JSON, YAML, Markdown, GraphQL и многих других технологий. Используя плагины, он также применим к нескольким языкам программирования, таким как PHP, PUG, XML и Ruby.
Вы можете получить доступ к разговору Джеймса Лонга о Prettier, нажав здесь. Выделим преимущества Prettier из его выступления:
- Последовательность. У каждого разработчика может быть свой стиль кодирования, но при работе в команде важно придерживаться общего стандарта кодирования. Prettier позволяет нам легко применять этот стандарт к нашим проектам.
- Обучаемость. Он может служить учебным пособием для новичков в программировании.
- Свобода: Prettier позволяет нам полностью сосредоточиться на коде, не заботясь о стилях. После написания кода нам не нужно отдельно заботиться о его форматировании.
Мы упомянули, что ESLint предоставляет некоторые функции форматирования, но при использовании Prettier нам не нужны эти функции, поскольку Prettier уже покрывает их. Чтобы отключить правила ESLint, которые могут конфликтовать с Prettier, нам нужно установить и настроить библиотеку [eslint-config-prettier].
Вот как это сделать:
- установка npm — save-dev eslint-config-prettier
- В файле .eslintrc.yaml обновите раздел «extends», включив в него «eslint:recommended» и «prettier»:
extends: - eslint:recommended - prettier
В файле .prettierignore мы указываем файлы, которые Prettier не должна форматировать. Prettier также учитывает файлы .gitignore или .eslintignore, поэтому, если мы определили эти исключения в любом из этих файлов, нет необходимости дублировать их в .prettierignore.
Выполнение команды npx prettier . --write форматирует наш проект, просматривая файлы. Кроме того, расширение prettier-vscode позволяет нам форматировать код с помощью ярлыков. Кроме того, чтобы автоматически запускать Prettier каждый раз, когда мы сохраняем изменения (Ctrl + S) в VS Code, мы можем включить параметр Форматировать при сохранении в настройках VS Code, как показано ниже:
В отличие от ESLint, Prettier обеспечивает гибкость только в определенных аспектах. Это связано с тем, что основная цель Prettier — устранить споры о стиле кода и позволить нам сосредоточиться на самом коде. Однако по многочисленным просьбам сообщества было введено несколько настраиваемых параметров. Вот некоторые параметры, которые мы можем настроить:
singleQuote: true ## default value is false.Use single quotes instead of double quotes. tabWidth: 5 # default value is 2.Specify the number of spaces per indentation-level. semi: false # default value is true.Print semicolons at the ends of statements. trailingComma: all #Use single quotes instead of double quotes in JSX. printWidth: 100 #Default value is 100. Specify the line length that the printer will wrap on.
Наконец, давайте рассмотрим, как убедиться, что эти знания проверяются перед их фиксацией.
Примечание: Prettier следует запускать после проверки ESLint, а не до!
Git предоставляет хуки, которые можно выполнять до и после определенных событий, таких как фиксация и отправка. Мы можем получить доступ к этому списку хуков в корневом каталоге нашего проекта с помощью команды ./git/hooks. Мы можем изменить эти хуки, чтобы ESLint запускался перед фиксацией, но любые внесенные нами изменения будут влиять только на нашу локальную машину, а не на машины членов нашей команды.
Используя пакет Husky, мы можем управлять этими изменениями через Git и обеспечивать их применение ко всем машинам, использующим проект. Кроме того, с пакетом lint-staged мы можем заставить эти хуки работать только с файлами, в которых есть изменения, а не со всем проектом. Такой подход ускоряет процесс фиксации.
Таким образом, пакеты Husky и lint-stage предоставляют способ управления хуками через Git, гарантируя, что проверки ESLint и Prettier последовательно применяются на всех машинах участников проекта и что они применяются только к измененным файлам для эффективных коммитов.
- npm i -D husky lint-staged
2. Добавьте следующий код в файл package.json
"scripts": {
"husky": "husky install"
},
"lint-staged": {
"./**/*.{jsx,js,vue}": [
"eslint . --fix",
"prettier --write ."
]
},js
3. нпм беги хаски
4. npx husky добавить .husky/pre-commit «npx lint-staged»
После выполнения этих шагов вы можете приступить к фиксации изменений:
- git добавить .
- git commit -m «инициировать фиксацию»
Для лучшего взаимодействия с ESLint и гибкой настройки рассмотрите возможность создания шаблона проекта с использованием Vue CLI вместо Vite. Используйте команду npm create vue@latest для создания соответствующего шаблона проекта на основе предоставленных вами ответов.
Теперь вы погрузились в мир Prettier и ESLint. Увидимся в следующей статье.
