Как настроить linting в Nuxt.js?

@magdalen_kub 

Для настройки линтинга в Nuxt.js можно использовать встроенные инструменты линтинга ESLint и Stylelint.

1. ESLint:Установите пакеты eslint и eslint-loader:npm install eslint eslint-loader --save-dev Создайте файл .eslintrc.js в корневой директории проекта и определите конфигурацию ESLint:module.exports = { root: true, env: { browser: true, node: true, }, parserOptions: { parser: 'babel-eslint', }, extends: [ '@nuxtjs', 'plugin:nuxt/recommended', 'prettier', 'prettier/vue', 'plugin:prettier/recommended', ], plugins: [], // Дополнительные правила и настройки rules: {}, }; Добавьте следующую секцию в build в файле nuxt.config.js:build: { extend(config, ctx) { // Run ESLint on save if (ctx.isDev && ctx.isClient) { config.module.rules.push({ enforce: 'pre', test: /.(js|vue)$/, loader: 'eslint-loader', exclude: /(node_modules)/, }); } }, },
2. Stylelint:Установите пакет stylelint:npm install stylelint --save-dev Создайте файл .stylelintrc в корневой директории проекта и определите конфигурацию Stylelint:{ "extends": "@nuxtjs/stylelint-config", "rules": { // Дополнительные правила и настройки } } Добавьте следующую секцию в build в файле nuxt.config.js:build: { extend(config, { isDev, isClient }) { // Run Stylelint on save if (isDev && isClient) { config.module.rules.push({ enforce: 'pre', test: /.(sass|scss|css)$/, loader: 'stylelint-custom-processor-loader', exclude: /(node_modules)/, }); } }, },

После настройки линтинга в Nuxt.js, вы можете запустить проверку линтера с помощью следующих команд:

1
2
3
4
5

# Проверить ESLint
npm run lint

# Проверить Stylelint
npm run lint:stylelint