Как проверить код TypeScript с помощью ESLint

TypeScript React.js ESLint

январь 2019 г.,Tymdercript официально решил полностью принять EslintКак инструмент для проверки кода и создания нового проектаtypescript-eslint, который предоставляет парсер для файлов TypeScript.@typescript-eslint/parserи соответствующие параметры конфигурации@typescript-eslint/eslint-pluginЖдать. И оба предыдущих решения lint будут объявлены устаревшими:

  • typescript-eslint-parserТехническое обслуживание остановлено
  • TSLintБудет предоставлен инструмент миграции, который прекратит поддержку TSLint, когда typescript-eslint будет достаточно полным (как только мы посчитаем, что ESLint является полным по сравнению с TSLint, мы прекратим поддержку TSLint и поможем пользователям перейти на ESLint).1)

Таким образом, текущие и будущие решения для проверки кода TypeScripttypescript-eslint.

что такое проверка кода

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

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

Зачем нужна проверка кода

Кто-то может возразить, что JavaScript настолько гибок, что требует проверки кода. А TypeScript уже на этапе компиляции может проверить на массу проблем, зачем вам проверка кода?

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

  • Должен ли отступ быть четыре пробела или два пробела?
  • Должен ли он быть отключенvar?
  • Должно ли имя интерфейса начинаться сIначало?
  • Обязательно ли использование===вместо==?

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

Давайте рассмотрим конкретный пример:

var myName = 'Tom';

console.log(`My name is ${myNane}`);
console.log(`My name is ${myName.toStrng()}`);

Что не так с приведенным выше кодом?

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

let myName = 'Tom';
// eslint 报错信息：
// Unexpected var, use let or const instead.eslint(no-var)

console.log(`My name is ${myNane}`);
// tsc 报错信息：
// Cannot find name 'myNane'. Did you mean 'myName'?
// eslint 报错信息：
// 'myNane' is not defined.eslint(no-undef)
console.log(`My name is ${myName.toStrng()}`);
// tsc 报错信息：
// Property 'toStrng' does not exist on type 'string'. Did you mean 'toString'?
существующие проблемы tscСообщать ли об ошибке eslintСообщать ли об ошибке
следует использоватьletилиconstвместоvar ❌ ✅
myNameбыло написано с ошибкой какmyNane ✅ ✅
toStringбыло написано с ошибкой какtoStrng ✅️ ❌

В приведенном выше примере мы использовалиvarдля определения переменной, но ES6 имеет более продвинутый синтаксисletа такжеconst, то можно пройтиeslintПроверьте это, подсказки, которые мы должны использоватьletилиconstвместоvar.

Для неопределенных переменныхmyNane,tscа такжеeslintможно проверить.

из-заeslintне опознаноmyNameКакие методы существуют, так для опечаткиtoStringНе проверил это.

Отсюда видно, чтоeslintможет найти некоторыеtscЯ не забочусь об ошибках и проверяю некоторые потенциальные проблемы, поэтому проверка кода по-прежнему очень важна.

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

Установить ESLint

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

npm install --save-dev eslint

Поскольку ESLint по умолчанию используетEspreeДля разбора грамматики некоторые грамматики TypeScript не распознаются, поэтому нам нужно установить@typescript-eslint/parser, замените парсер по умолчанию, не забудьте заодно его установитьtypescript:

npm install --save-dev typescript @typescript-eslint/parser

Далее необходимо установить соответствующий плагин@typescript-eslint/eslint-pluginОн дополняет правила eslint по умолчанию и предоставляет некоторые дополнительные правила, применимые к синтаксису ts.

npm install --save-dev @typescript-eslint/eslint-plugin

Создать файл конфигурации

ESLint нужен файл конфигурации, чтобы определить, какие правила для проверки имени файла конфигурации обычно.eslintrc.jsили.eslintrc.json.

При запуске ESLint для проверки файла он сначала попытается прочитать файл конфигурации в каталоге файла, а затем будет искать уровень за уровнем и объединять найденную конфигурацию с текущим проверяемым файлом.

Мы создаем.eslintrc.js, содержание следующее:

module.exports = {
    parser: '@typescript-eslint/parser',
    plugins: ['@typescript-eslint'],
    rules: {
        // 禁止使用 var
        'no-var': "error",
        // 优先使用 interface 而不是 type
        '@typescript-eslint/consistent-type-definitions': [
            "error",
            "interface"
        ]
    }
}

В приведенной выше конфигурации мы указали два правила, гдеno-varэто родное правило ESLint,@typescript-eslint/consistent-type-definitionsда@typescript-eslint/eslint-pluginДобавлены правила.

Значением правила обычно является массив (в приведенном выше примере@typescript-eslint/consistent-type-definitions), где первый членoff,warnилиerrorОдин из , что означает выключение, предупреждение и ошибку. Следующие пункты — это все остальные конфигурации правила.

Если другой конфигурации нет, значение правила может быть сокращено до первого элемента в массиве (в приведенном выше примереno-var).

Значения выключения, предупреждения и ошибки следующие:

  • Выкл.: отключить это правило.
  • Предупреждение: вывод сообщений об ошибках во время проверки кода, но не влияет на код выхода.
  • Отчет об ошибке: при обнаружении ошибки выводится не только сообщение об ошибке, но и код выхода, равный 1 (как правило, если код выхода не равен 0, это означает, что при выполнении произошла ошибка)

Проверьте файл ts

После создания файла конфигурации давайте создадим файл ts и посмотрим, сможем ли мы проверить его с помощью ESLint.

Создать новый файлindex.ts, скопируйте в него следующее:

var myName = 'Tom';

type Foo = {};

Затем выполните следующую команду:

./node_modules/.bin/eslint index.ts

Вы получите следующее сообщение об ошибке:

/path/to/index.ts
  1:1  error  Unexpected var, use let or const instead  no-var
  3:6  error  Use an `interface` instead of a `type`    @typescript-eslint/consistent-type-definitions

✖ 2 problems (2 errors, 0 warnings)
  2 errors and 0 warnings potentially fixable with the `--fix` option.

Приведенные выше результаты показывают, что действуют два только что настроенных правила: запретить использованиеvar;Приоритетное использованиеinterfaceвместоtype.

Обратите внимание, что мы используем./node_modules/.bin/eslint, вместо глобальногоeslintScript, потому что проверка кода является важной частью проекта, поэтому мы обычно устанавливаем его в текущем проекте.

Однако выполнять каждый раз такой длинный скрипт довольно неудобно.package.jsonдобавитьscriptДавайте создадим скрипт npm, чтобы упростить этот шаг:

{
    "scripts": {
        "eslint": "eslint index.ts"
    }
}

Тогда просто выполнитьnpm run eslintВот и все.

Проверьте файл ts всего проекта

Исходные файлы нашего проекта обычно размещаются вsrcкаталог, поэтому вам нужно поместитьpackage.jsonсерединаeslintВместо этого скрипт проверяет каталог. из-заeslintНе проверено по умолчанию.tsсуффикс, поэтому вам нужно добавить параметры--ext .ts:

{
    "scripts": {
        "eslint": "eslint src --ext .ts"
    }
}

выполнить в это времяnpm run eslintбудет провереноsrcвсе в каталоге.tsфайлы с суффиксами.

Интеграция проверок ESLint в VSCode

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

Чтобы интегрировать проверку ESLint в VSCode, нам нужно сначала установить плагин ESLint, нажать кнопку «Расширение», выполнить поиск ESLint, а затем установить его.

Плагин ESLint в VSCode по умолчанию не проверяет.tsсуффикс, вам нужно "Файл => Настройки => Настройки => Рабочая область" (вы также можете создать файл конфигурации в каталоге проекта.vscode/settings.json), добавьте следующую конфигурацию:

{
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        "typescript"
    ],
    "typescript.tsdk": "node_modules/typescript/lib"
}

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

VSCode ESLint 错误信息

Мы также можем включить функцию автоматического восстановления при сохранении, настроив:

{
    "eslint.autoFixOnSave": true,
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        {
            "language": "typescript",
            "autoFix": true
        },
    ],
    "typescript.tsdk": "node_modules/typescript/lib"
}

После сохранения файла его можно автоматически восстановить:

let myName = 'Tom';

interface Foo {}

Исправление ошибок форматирования с помощью Prettier

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

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

Во-первых, нужно установить красивее:

npm install --save-dev prettier

затем создайтеprettier.config.jsфайл, который содержит элементы конфигурации Prettier. У Prettier очень мало элементов конфигурации, здесь я рекомендую правило конфигурации для справки:

// prettier.config.js or .prettierrc.js
module.exports = {
    // 一行最多 100 字符
    printWidth: 100,
    // 使用 4 个空格缩进
    tabWidth: 4,
    // 不使用缩进符，而使用空格
    useTabs: false,
    // 行尾需要有分号
    semi: true,
    // 使用单引号
    singleQuote: true,
    // 对象的 key 仅在必要时用引号
    quoteProps: 'as-needed',
    // jsx 不使用单引号，而使用双引号
    jsxSingleQuote: false,
    // 末尾不需要逗号
    trailingComma: 'none',
    // 大括号内的首尾需要空格
    bracketSpacing: true,
    // jsx 标签的反尖括号需要换行
    jsxBracketSameLine: false,
    // 箭头函数，只有一个参数的时候，也需要括号
    arrowParens: 'always',
    // 每个文件格式化的范围是文件的全部内容
    rangeStart: 0,
    rangeEnd: Infinity,
    // 不需要写文件开头的 @prettier
    requirePragma: false,
    // 不需要自动在文件开头插入 @prettier
    insertPragma: false,
    // 使用默认的折行标准
    proseWrap: 'preserve',
    // 根据显示样式决定 html 要不要折行
    htmlWhitespaceSensitivity: 'css',
    // 换行符使用 lf
    endOfLine: 'lf'
};

Затем установите плагин Prettier в VSCode, а затем измените.vscode/settings.json:

{
    "files.eol": "\n",
    "editor.tabSize": 4,
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "eslint.autoFixOnSave": true,
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        {
            "language": "typescript",
            "autoFix": true
        }
    ],
    "typescript.tsdk": "node_modules/typescript/lib"
}

Это включает автоматическое форматирование файлов и автоматическое исправление ошибок ESLint при сохранении файлов.

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

Использование конфигурации Eslint eslinteam

Нативные правила ESLint и@typescript-eslint/eslint-pluginСлишком много правил, а некоторые из нативных правил плохо поддерживаются в TypeScript и должны быть отключены.

Здесь я рекомендую использоватьВерсия TypeScript в правилах AlloyTeam ESLint, он предоставил нам полный набор правил конфигурации и полностью совместим с Prettier (eslint-config-alloy не содержит никаких правил формата кода, и проблема с форматом кода предоставляется для решения более профессиональным Prettier).

Установить:

npm install --save-dev eslint typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-config-alloy

Создайте в корневом каталоге вашего проекта.eslintrc.js, и скопируйте в файл следующее:

module.exports = {
    extends: [
        'alloy',
        'alloy/typescript',
    ],
    env: {
        // 您的环境变量（包含多个预定义的全局变量）
        // Your environments (which contains several predefined global variables)
        //
        // browser: true,
        // node: true,
        // mocha: true,
        // jest: true,
        // jquery: true
    },
    globals: {
        // 您的全局变量（设置为 false 表示它不允许被重新赋值）
        // Your global variables (setting to false means it's not allowed to be reassigned)
        //
        // myGlobal: false
    },
    rules: {
        // 自定义您的规则
        // Customize your rules
    }
};

Дополнительные способы использования см.Правила AlloyTeam ESLint

Проверка файлов tsx с помощью ESLint

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

Установитьeslint-plugin-react 

npm install --save-dev eslint-plugin-react

scripts.eslint в package.json добавить.tsxсуффикс

{
    "scripts": {
        "eslint": "eslint src --ext .ts,.tsx"
    }
}

Добавлена ​​проверка typescriptreact в конфигурации VSCode.

{
    "files.eol": "\n",
    "editor.tabSize": 4,
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "eslint.autoFixOnSave": true,
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        {
            "language": "typescript",
            "autoFix": true
        },
        {
            "language": "typescriptreact",
            "autoFix": true
        }
    ],
    "typescript.tsdk": "node_modules/typescript/lib"
}

Используйте версию TypeScript React из правил AlloyTeam ESLint.

Версия TypeScript React в правилах AlloyTeam ESLint

Troubleshootings

Cannot find module '@typescript-eslint/parser'

Вы используете глобальный eslint, вместо этого вам нужно запустить./node_modules/.bin/eslint.

VSCode не показывает ошибки от ESLint

  1. Проверьте «Файл => Настройки => Настройки» для правильной настройки.
  2. Проверьте, установлены ли необходимые пакеты npm
  3. экзамен.eslintrc.jsЕсть ли конфигурация
  4. Проверьте, находится ли файл в.eslintignoreсередина

Если ни один из вышеперечисленных шагов не работает, вы можете настроить его в «Файл => Настройки => Настройки»."eslint.trace.server": "messages",согласно сCtrl+Shift+UОткройте панель вывода и выберите вывод ESLint, чтобы увидеть конкретные ошибки.

VSCode 的 ESLint 输出

Почему некоторые определенные переменные (например, использованиеenumопределенная переменная) не используется, но ESLint не сообщает об ошибке?

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

{
    "compilerOptions": {
        "noUnusedLocals": true,
        "noUnusedParameters": true
    }
}

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

Первый параметр может начинаться со знака подчеркивания, см.GitHub.com/Microsoft/T…

Категории