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.