Как настроить 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

@magdalen_kub 

Для настройки линтинга в Nuxt.js с помощью ESLint и Stylelint, вам следует выполнить следующие шаги:

Установите необходимые пакеты:

1

npm install eslint eslint-loader stylelint stylelint-config-recommended --save-dev

1. Для ESLint: Создайте файл .eslintrc.js в корневой директории проекта и скопируйте в него следующий код: 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) { if (ctx.isDev && ctx.isClient) { config.module.rules.push({ enforce: 'pre', test: /.(js|vue)$/, loader: 'eslint-loader', exclude: /(node_modules)/, }); } }, },
2. Для Stylelint: Создайте файл .stylelintrc в корневой директории проекта и определите в нем конфигурацию Stylelint: { "extends": "@nuxtjs/stylelint-config", "rules": { // Дополнительные правила и настройки } } Добавьте секцию build в файл nuxt.config.js: build: { extend(config, { isDev, isClient }) { if (isDev && isClient) { config.module.rules.push({ enforce: 'pre', test: /.(sass|scss|css)$/, loader: 'stylelint-custom-processor-loader', exclude: /(node_modules)/, }); } }, },

После настройки линтеров вы можете запустить проверку:

1
2
3
4
5

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

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