ESLINT и более красивая спецификация кода реализации, автоматическое форматирование

ESLint

Эта статья предназначена только для технической проверки, записи, общения и ни на кого не направлена. Прости за любую обиду. Эта статья была впервые опубликована по адресу https://vsnail.cn/static/doc/blog/eslintPrettier.html.

На самом деле, я давно хотел использовать его в технике.eslintа такжеprettierдля стандартизации кода. Ноeslintа такжеprettierлюбить и убивать друг друга, плюс кадр(vue,react) уникален для письма (jsx,template) и так далее всегда делают процесс разработки очень болезненным, запутанным и перегруженным. так что включай каждый разesint, затем отключите, включите, отключите и так далее, снова и снова. Некоторое время назад я просматривал материалы, связанные с фронтенд-инжинирингом, и обнаружил, что спецификация формата инженерного кода является одной из важных ссылок. Гу Эр, хорошенько взгляни на выходныеeslintа такжеprettier, для достижения эффективной и стандартизированной разработки.

На пути к спецификации кода наша конечная цель состоит в том, чтобы:

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

через паруeslintа такжеprettierОбщее понимание , на самом деле, можно найти, чтоprettierиспользуется для форматирования кода. Пока правила спецификации кода установлены и код наwarn,errorдождаться напоминания,eslintбыть реализованным. Поэтому нашей большой целью должно бытьeslint, затем поставьтеprettierинтегрированный.

ESLint

ESLintявляется открытым исходным кодомJavaScriptИнструмент проверки кода, созданный Николасом С. Закасом в июне 2013 года. Инспекция кода — это статический анализ, который часто используется для поиска проблемных шаблонов или кода и не привязан к определенному стилю кодирования. Проверка кода доступна для большинства языков программирования, и обычно компиляторы имеют встроенные инструменты проверки.

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

Как настроить

настроитьESLintЕсть два способа:

  • использоватьJavaScriptКомментарии встраивают информацию о конфигурации непосредственно в исходный файл кода.
  • профилированный

Среди этих двух методов «файл конфигурации» является наиболее распространенным методом настройки. использоватьJavaScript,JSONилиYAMLФайл определяет информацию о конфигурации для всего каталога (обрабатывающего ваш домашний каталог) и его подкаталогов.ESLintОни просматриваются и считываются автоматически, и вы можете указать произвольный файл конфигурации при запуске из командной строки.

ESLintПоддерживаются несколько форматов конфигурационных файлов:

  • JavaScript- использовать.eslintrc.jsЗатем выведите объект конфигурации.
  • YAML- использовать.eslintrc.yamlили.eslintrc.ymlОпределите конфигурацию конфигурации.
  • JSON- использовать.eslintrc.jsonопределить структуру конфигурации,ESLintизJSONфайл разрешенJavaScriptпримечания к стилю.
  • (устарело) - использовать.eslintrc,Может сделатьJSONЭто также может быть YAML.
  • package.json- существуетpackage.jsonсоздатьeslintConfigproperties, определите свою конфигурацию там.

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

  • .eslintrc.js
  • .eslintrc.yaml
  • .eslintrc.yml
  • .eslintrc.json
  • .eslintrc
  • package.json

Поскольку логика легко пишется на js, а ее приоритет относительно высок, в качестве файла конфигурации рекомендуется использовать js-файл.

Что означают эти конфиги?

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

Parser

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

Следующий парсер работает сESLintсовместимый:

  • Esprima
  • Babel-ESLint — оболочка парсера Babel, позволяющая ему работать сESLintсовместимый.
  • typescript-eslint-parser (экспериментальный) — синтаксический анализатор, который преобразует TypeScript в формат, совместимый с ESTree, чтобы его можно было использовать вESLintиспользуется в. Цель этого - пройтиESLintдля разбора файлов TypeScript (хотя и не обязательно через всеESLintправило). Обратите внимание, что при использовании пользовательского парсера, чтобы позволитьESLintработа с не-ECMAScript 5Нормальная работа, свойства конфигурацииparserOptionsВсе еще обязательно. Парсер будет передан вparserOptions, но не обязательно использовать их для определения переключателей функций.

parserOptions

Это свойство часто используется для установки некоторой конфигурации парсера. Доступные варианты:

    1. ecmaVersion: сформулироватьECMAScriptверсия.

Настройка по умолчанию составляет 3,5 (по умолчанию), вы можете использовать 6,7,8 или 9, чтобы указать, что вы хотите использоватьECMAScriptВерсия. Вы также можете указать 2015 (те же 6), 2016 (то же 7), 2017 (то же 9) или 2018 (то же 9) (то же 9)

    1. sourceType: Тип источника

Установить как "script" (по умолчанию) или "module"(если ваш кодECMAScriptмодуль).

    1. ecmaFeatures: Это объект, представляющий дополнительные языковые функции, которые вы хотите использовать:

  • 3.1 globalReturn- Разрешить использование в глобальном масштабеreturnутверждение

  • 3.2 impliedStrict- Включить глобальный строгий режим (еслиecmaVersion5 и выше)

  • 3.3 jsx- включитьJSX

  • 3.4 experimentalObjectRestSpread- включить экспериментальныйobject rest/spread propertiesслужба поддержки. (Важно: это экспериментальная функция, в будущем в правила могут быть внесены существенные изменения, рекомендуется написать, что вы не полагаетесь на эту функцию, за исключением случаев, когда она изменяется, вы готовы нести расходы на обслуживание.)

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

Environments

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

  • browser- Глобальные переменные в среде браузера.
  • node - Node.jsглобальные переменные иNode.jsобъем.
  • commonjs - CommonJSглобальные переменные иCommonJSОбласть (дляBrowserify/WebPackупакованный код, который работает только в браузере).
  • shared-node-browser - Node.jsа такжеBrowserОбщая глобальная переменная.
  • es6- включить кромеmodulesВсе кромеECMAScript 6Свойства (этот параметр устанавливается автоматическиecmaVersionПараметр парсера 6).
  • worker - Web Workersглобальные переменные.
  • amd- Будуrequire()а такжеdefine()определяется какamdта самая глобальная переменная.
  • mocha- Добавить всеMochaПротестируйте глобальные переменные.
  • jasmine- добавить всеJasmineТестовые глобалы для версий 1.3 и 2.0.
  • jest - Jestглобальные переменные.
  • phantomjs - PhantomJSглобальные переменные.
  • protractor - Protractorглобальные переменные.
  • qunit - QUnitглобальные переменные.
  • jquery - jQueryглобальные переменные.
  • prototypejs - Prototype.jsглобальные переменные.
  • shelljs - ShellJSглобальные переменные.
  • meteor - Meteorглобальные переменные.
  • mongo - MongoDBглобальные переменные.
  • applescript - AppleScriptглобальные переменные.
  • nashorn - Java 8 Nashornглобальные переменные.
  • serviceworker - Service Workerглобальные переменные.
  • atomtest - AtomПротестируйте глобальные переменные.
  • embertest - EmberПротестируйте глобальные переменные.
  • webextensions - WebExtensionsглобальные переменные.
  • greasemonkey - GreaseMonkeyглобальные переменные. Эти среды не являются взаимоисключающими, поэтому вы можете определить несколько одновременно.

Globals

Когда мы используем глобальные переменные, предоставленные третьими лицами (например:jQuery,AMapтак далее.),ESLintОн их не распознает и всегда выдает ошибку. В это время появляется роль конфигурации. использоватьglobalsУкажите глобальную переменную, которую вы хотите использовать. установить переменную вtrueБудут ли переписаны допустимые переменные илиfalseНе будет позволено быть переопределенным.

Plugins

ESLintПоддерживает использование сторонних плагинов. Прежде чем использовать плагин, вы должны установить его с помощью менеджера пакетов. При настройке плагина в конфигурационном файле можно использоватьpluginsключевое слово для хранения списка имен плагинов. Название плагина можно не указыватьeslint-plugin-приставка.

Rules

ESLintПоставляется с тоннами правил. Вы можете использовать аннотации или файлы конфигурации для изменения правил, которые будут использоваться в вашем проекте. Чтобы изменить параметр правила, вы должны установить для идентификатора правила значениеoff,warn,errorодин из трех.

унаследованный файл конфигурации

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

extends

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

extendsЗначения свойств могут быть:

(1), строка, указанная в конфигурации

(2), массив строк: каждая конфигурация наследует предыдущую конфигурацию

ESLintРасширяйте конфигурацию рекурсивно, чтобы базовая конфигурация также могла иметьextendsАтрибуты.

extendsОн может вводить общие пакеты конфигурации и плагины.

  • Общий пакет конфигурации

Совместно используемая конфигурация — этоnpmpackage, который выводит объект конфигурации.

extendsЗначения свойств могут не указывать префикс имени пакета eslint-config-.

  • плагин

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

pluginsЗначение атрибута может не указывать префикс имени пакета.eslint-plugin-.

extendsЗначения свойств могут состоять из следующего:

(1),plugin: (2), имя пакета (префикс опускается, например,react) (3), / (4), имя конфигурации (например,recommended)

Prettier

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

Почему мы используем его вместо других инструментов форматирования кода? Prettier в основном имеет следующие преимущества:

  • Настраиваемый
  • Поддерживает несколько языков
  • Интеграция с большинством редакторов
  • Краткие элементы конфигурации

ESLint + Prettier

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

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

кvueПример проекта:

Шаг 1: Загрузите соответствующий пакет

Самое основное, обязательно хотим скачатьeslint,prettierэти два пакета.

Во-вторых, чтобы его интегрировать, нам нужен "общий пакет конфигурации" и написанные плагины. Итак, нам нужно скачатьeslint-plugin-prettier,eslint-config-prettier.

Опять же, нам нужно встать на плечи гигантов и увидеть мир. Другими словами, нам нужны более зрелые спецификации в отрасли, чтобы стандартизировать наш код. Таким образом, мы можем использовать плагин спецификации кода, предоставленный большой командой. Чем более известенairbnb. Здесь мы выбираемairbnb-base. Итак, нам нужно скачатьeslint-config-airbnb-base.

И, наконец, за идеальное использование некоторых наших новых функций ES6. Нам нужно установить «лексер» наbabel-eslint. Так что нам тоже нужно скачатьbabel-eslint.

да мыvueпроект, то должен быть плагин для настройки vue, поэтому нам нужно скачатьeslint-plugin-vue

Резюме доступно, нам нужно скачать следующие пакеты


npm install esint prettier eslint-plugin-prettier eslint-config-prettier eslint-config-airbnb-base babel-eslint eslint-plugin-vue

Второй шаг — создать файл конфигурации

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

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


module.exports = {
  env: {
    browser: true,
    jquery: true, //由于项目中使用来jquery。。。其实不用引入jquery的，以后有机会去掉jquery后，请移除该配置。
  },
  parserOptions: {
    parser: 'babel-eslint', //词法解析器使用babel-eslint，以更好的适配es6的新api
    ecmaVersion: 6, //启用 ES6 语法支持;默认设置为3，5（默认）， 你可以使用 6、7、8 或 9 来指定你想要使用的 ECMAScript 版本。你也可以用使用年份命名的版本号指定为 2015（同 6），2016（同 7），或 2017（同 8）或 2018（同 9）
    sourceType: 'module', //设置为 "script" (默认) 或 "module"（如果你的代码是 ECMAScript 模块)。
  },
  extends: [
    'airbnb-base',
    'eslint:recommended',
    'plugin:vue/essential',
    'plugin:prettier/recommended',
  ],
  plugins: ['vue', 'prettier'],
  rules: {
    'prettier/prettier': 'error',
    'generator-star-spacing': 'off',
    'import/no-named-as-default': 'off',
    'import/no-named-as-default-member': 'off',
    'no-unused-vars': [
      'error',
      { vars: 'all', args: 'none', ignoreRestSiblings: false },
    ], //没有使用的参数，不会报错。因为个人觉的把可用的参数写上去 有利于以后的维护。
  },
};

Инструменты разработки

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

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

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

    1. ОткрытьVScodeфайл конфигурации

    1. Добавьте следующую конфигурацию.

...

"prettier.eslintIntegration": true,
  "eslint.autoFixOnSave": true,
  "editor.formatOnSave": true,
  //配置 ESLint 检查的文件类型
  "eslint.validate": ["javascript", "javascriptreact", "vue", "html"],
  "eslint.options": {
    "configFile": "./`.eslintrc`.js"
  },

...

webpack

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

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

постскриптум

На самом деле, с точки зрения спецификации кода, мы используемeslintЕсть много, много вещей, которые можно сделать.

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

мы также можемgitПеред отправкой выполните автоматическое определение, чтобы избежать отправки неправильного кода в команду. могу одолжитьcode reviewчасть энергии, которая можетcode reviewОсновное внимание уделяется рациональности самой логики кода.

Ладно, спокойной ночи~

Категории