Правка синтаксиса VueJS при помощи ESLint, EditorConfig и JSHint

ESLint, пакет-плагин для правки по синтаксису вашего кода проекта VueJS. Для его подключения используем команду "npm install --save-dev eslint eslint-plugin-vue" в npm.

После применения этой команды у нас в packege.json должны появится строки:

package.json

  "devDependencies": {
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-router": "~5.0.0",
    "@vue/cli-plugin-vuex": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "eslint": "^8.24.0",
    "eslint-plugin-vue": "^9.5.1"
  },

Далее в "packege.json" в раздел "scripts" добавляем пару строк:

1. "lint:js": "eslint --ext \".js,.vue\" --ignore-path .gitignore .",
2. "lint": "npm run lint:js".

Получится вот так

  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint:js": "eslint --ext \".js,.vue\" --ignore-path .gitignore .",
    "lint": "npm run lint:js"
  },

Далее для работы нам могут пригодится еще две зависимости (частный случай зависящий от настроек ESLint расположенных в файле настроек .eslintrc, который располагается в корне проекта*), поставим их.

*В некоторых случаях нам может пригодится @babel/eslint-parser, об этом будет говорить строка "parser": "@babel/eslint-parser", в разделе "parserOptions" файла .eslintrc.

Используем команду "npm install eslint @babel/core @babel/eslint-parser --save-dev", после этого в файле "packege.json" в разделе "devDependencies" появятся зависимости.

"devDependencies" зависимости

  "devDependencies": {
    "@babel/core": "^7.19.3",
    "@babel/eslint-parser": "^7.19.1",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-router": "~5.0.0",
    "@vue/cli-plugin-vuex": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "eslint": "^8.24.0",
    "eslint-plugin-vue": "^9.5.1"
  },

Все правила проверки синтаксиса должны распологаться в файле ".eslintrc" в корне вашего проекта.

Для запуска ESLint из командной строки мы будем использовать команду "npm run lint:js".

Настройки ESLint

Настройка multi-word-component-names

Для отключения проверки параметров "multi-word-component-names" нам нужно добавить в файл ".eslintrc" в раздел "rules".

Пример, вырезка из файла .eslintrc

	"plugins": [
		"vue"
	],
	"rules": {
		"vue/multi-word-component-names": "off",
		"vue/component-name-in-template-casing": [
			"error",
			"kebab-case"
		],
		"no-console": 0,
		"no-debugger": 0,
		"indent": [
			"warn",
			"tab"
		],
		"no-tabs": 0,
		"no-trailing-spaces": [
			2,
			{
				"skipBlankLines": true
			}

Если нужно эту проверку отключить не для всех имен, а только для некоторых, то в этом случае в раздел "rules" нужно написать следующее, где в квадратных скобках перечисляются имена, которые проверять не нужно.

Пример, вырезка из файла .eslintrc

{
  "vue/multi-word-component-names": ["error", {
    "ignores": ["agreement", "home"]
  }]
}

Скачать файл .eslintrc с базовыми настройками для проектов VueJS. 

Правка синтаксиса VueJS при помощи EditorConfig

Здесь все просто. Для проверки синтаксиса EditorConfig нам нужно установить в Visual Studio Code этот плагин, а для его настроек в наш проект, в корень добавляем файл .editorconfig, в котором возможны правки правил проверок.

Правка синтаксиса VueJS при помощи JSHint

Здесь все просто. Для проверки синтаксиса JSHint нам нужно установить в Visual Studio Code этот плагин, а для его настроек в наш проект, в корень добавляем файл .jshint, в котором возможны правки правил проверок.

Кроме этого, если нам нужно что бы проверка на обычных js файлах не проводилась, то в начало этого файла добавим строку "", которая запретит JSHint проверять именно этот js файл.

Пример, вырезка из js файла Vue проекта

/* jshint ignore:start */
import { createApp } from "vue"
import App from "./App"
import Router from "./router"
import Languages from "./langs"

import UIkit from "uikit"
import IMask from "imask"