**相关章节**
Спецификация внешнего интерфейса (1) Спецификация внешнего интерфейса ESlint и @antfu/eslint-config
(2) Спецификация
внешнего интерфейса Prettier (3)
Спецификация внешнего интерфейса stylelint (4) husky+lint-staged+commitizen+commitlint
ESlint
В этой статье будет записан контент, связанный с eslint в работе, часто используемые конфигурации, плагины и т. д.;
спецификации особенно важны в командных проектах, иначе при объединении кодов будет много конфликтов;
настройки settings.json в файле Рабочие пространства eslint и vscode можно эффективно использовать. Нормы команды остаются неизменными;
Конфигурация @antfu/eslint-config по умолчанию (рекомендуется)
Прежде чем представить ESlint, я рекомендую проект, который является проектом конфигурации по умолчанию для проекта ESlint с открытым исходным кодом Энтони Фу , который может сохранить много настроек. Стоит отметить, что Энтони Фу не относится к Prettier. Вы можете взять посмотрите введение босса к этой статье ниже;
Почему я не использую Prettier (antfu.me)
Просто установите и сохраните следующий контент в файлах .eslintrc и package.json, это просто и быстро.
[Подробнее см. в @antfu/eslint-config]( antfu/eslint-config: предустановки конфигурации ESLint Энтони (github.com) )
pnpm add -D eslint @antfu/eslint-config
{
"extends": "@antfu"
}
{
"scripts": {
"lint": "eslint .",
"lint:fix": "eslint . --fix"
}
}
Установить
Ищите Eslint непосредственно в торговом центре плагинов vscode. Стоит отметить, что нам также необходимо установить ESlint с помощью npm в проекте, поскольку нам нужно обнаружить наш код.
npm i eslint -D
инициализация
Во время инициализации будет происходить взаимодействие. Вы можете выбрать в соответствии с вашим фактическим проектом. После выбора взаимодействия будут рекомендованы пакеты npm, которые необходимо установить;
npx eslint --init
После завершения инициализации файл .eslintrc.cjs будет создан автоматически.
module.exports = {
"env": {
"browser": true, // 支持浏览器环境的检测
"es2021": true, // 支持es2021语法的检测
"node": true // 支持node环境的检测
},
"extends": [
"eslint:recommended", // 使用eslint推荐的配置进行检测
"plugin:vue/vue3-essential", // 支持vue3相关语法的检测
'plugin:@typescript-eslint/recommended' //ts推荐进行配置
],
"overrides": [
],
'parser': 'vue-eslint-parser',
"parserOptions": {
"ecmaVersion": "latest", // 解析文件的时候使用最新的ecmaVersion
"sourceType": "module", // 文件是ES6模块规范
'parser': '@typescript-eslint/parser',
},
"plugins": [
"vue",
'@typescript-eslint'
],
"rules": {
// 配置自己项目特有的一些检测规则
quotes: ['error','single'] //单引号示例
}
}
настройки рабочей области vscode
Настройки vscode сгруппированы в пользовательские настройки и настройки рабочей области.Пользовательские настройки действуют глобально, а рабочая область действительна для текущего проекта.Уровень рабочей области выше, чем пользовательские настройки, и код автоматически форматируется при включении сохранения;
{
"editor.codeActionsOnSave": {
"source.fixAll": true,
"source.fixAll.eslint": true
},
}
package.json добавляет скрипт
"scripts": {
"dev": "vite",
"build": "vue-tsc && vite build",
"preview": "vite preview",
"lint:eslint": "eslint --cache --max-warnings 0 \"{src,mock}/**/*.{vue,ts,tsx}\" --fix"
},
Запустите скрипт обнаружения ног
npm run lint:eslint
Разрешение конфликтов с Prettier
Некоторые люди говорят, что он будет отформатирован дважды, eslint отформатировал его один раз, а Prettier отформатировал его снова. Зачем нам два элемента конфигурации? Разве мы не можем упростить его до одного? Фактически, сообщество также высказало мнение VsCode, и VsCode дал ответ. Примерно означает, что каждый из них выполняет свои обязанности, поэтому лучше оставить оба.
Примеры конфликтных сценариев
Приведите пример сценария конфликта:
Одинарные кавычки конфигурации Eslint
Prettier настраивает двойные кавычки
явление конфликта
Поскольку правила в Prettier используют двойные кавычки, когда они существуют одновременно, окончательный результат форматирования будет основан на правилах в Prettier. То есть и Eslint, и Prettier будут форматировать файл, но Prettier будет форматировать файл. , перезапишет форматирование Eslint. Таким образом, окончательный форматированный результат заключен в двойные кавычки.
Решение
eslint-plugin-prettier и eslint-config-prettier могут эффективно решать конфликтные проблемы.
Среди них eslint-config-prettier отключит правила в Eslint, которые конфликтуют с Prettier, а eslint-plugin-prettier установит правила в Prettier для Eslint. Благодаря сотрудничеству этих двух плагинов правила Eslint и Prettier завершены. Объедините, конфликтующие правила будут подчиняться правилам Prettier.
npm install -D eslint-plugin-prettier eslint-config-prettier