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

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

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

В этой статье давайте создадим пакет, который предоставляет многоразовую конфигурацию ESlint, которую можно использовать в проектах Vue.

Выполните следующую команду, чтобы создать пакет npm. Убедитесь, что имя пакета начинается с eslint-config, например eslint-config-vue-standards. Если проект имеет область действия npm, вы можете назвать его @scope/eslint-config как таковой.

npm init

Это создаст файл package.json в каталоге нашего проекта.

Давайте установим ESlint,

npm install eslint --save-dev

ESlint устанавливается как devDependencies и добавляется к peerDependencies, чтобы убедиться, что потребительские приложения устанавливают ту же версию ESlint.

Далее давайте установим плагин ESlint, который поддерживает файлы Vue.

npm install eslint-plugin-vue --save

Правила ESlint полностью настраиваются в соответствии с нашим руководством по стилю. Вы можете включать/отключать их полностью или при определенных условиях. Чтобы узнать больше, проверьте это руководство.

Существует множество общих конфигураций ESlint, используемых многими компаниями, например eslint-config-airbnb, рекомендованный Airbnb. Точно так же вы также можете создать свой собственный набор конфигураций в виде пакета для своего проекта или компании на основе руководства по стилю, которому вы следуете, и поделиться им с другими командами для использования. Давайте установим некоторые из существующих конфигураций, которые уже применяют лучшие практики.

npm install eslint-config-airbnb-base eslint-plugin-import eslint-plugin-vuejs-accessibility --save

Давайте создадим файл конфигурации index.js, куда мы сможем расширить установленные конфиги.

module.exports = {
  env: {
    es6: true,
    browser: true,
    node: true,
  },
  parserOptions: {
    ecmaVersion: 2021,
    sourceType: "module",
    ecmaFeatures: {
      jsx: true,
    },
  },
  extends: [
    "eslint:recommended",
    "airbnb-base",
    "plugin:import/recommended",
    "plugin:vue/recommended",
    "plugin:vuejs-accessibility/recommended"
  ],
  rules: {
    "vue/camelcase": ["error"],
  },
};

Там env и parserOptions используются для определения таких сред, как узел, браузер и синтаксические анализаторы, такие как jsx, ECMA. Я добавил правило vue/camelcase с error конфигурацией, которая выдает ошибку, когда выражения внутри vue <template> не соответствуют соглашениям camelCase.

Теперь настроим покрасивее,

npm install prettier --save-dev

Как и ESlint, Prettier также должен быть одноранговой зависимостью.

Давайте установим более красивые конфиги,

npm install eslint-config-prettier eslint-plugin-prettier --save

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

module.exports = {
  env: {
    es6: true,
    browser: true,
    node: true,
  },
  parserOptions: {
    ecmaVersion: 2021,
    sourceType: "module",
    ecmaFeatures: {
      jsx: true,
    },
  },
  extends: [
    "eslint:recommended",
    "airbnb-base",
    "plugin:import/recommended",
    "plugin:vue/recommended",
    "plugin:vuejs-accessibility/recommended",
    "prettier",
    "plugin:prettier/recommended",
  ],
  rules: {
    "vue/camelcase": ["error"],
  },
};

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

module.exports = {
  tabWidth: 2,
  singleQuote: true
}

Ура. Готово! Вы можете опубликовать этот пакет и начать использовать его в любом приложении vue. Чтобы протестировать его локально, вы можете установить его, выполнив следующую команду.

npm install <path-to-application>/eslint-vue-blog --save-dev

Этот пакет доступен на Github.