Библиотека конфигураций инструментов разработки

Оглавление

1. Установка
2. Как наследовать правила из библиотеки
3. Зависимости, которые будут установлены вместе с библиотекой
4. Правила конфигурационных файлов
5. Переход на версию 1.1+

Установка

npm i @factoringplus/frontend-configs -D

Библиотека включает в себя инструменты разработки и их конфигурационные файлы, которые будут установлены в корневую папку проекта, если таковые отсутствуют.

Если у вас уже есть проект, вы можете наследовать конфигурационные файлы из этой библиотеки.

Файлы, которые будут установлены в корень проекта (если их нет):

husky/
.editorconfig
.prettierrc.mjs
eslint.config.mjs
.stylelintignore
.stylelintrc.json
.tsconfig.json
vite.config.ts

Добавьте в ваш package.json:

"scripts": {
  "lint": "eslint",
  "lint:scripts": "eslint --fix",
  "lint:styles": "stylelint \"**/*.{css,html,vue,scss}\"",
  "lint:styles:fix": "stylelint --fix \"**/*.{css,html,vue,scss}\"",
  "lint:prettier": "prettier --write .",
  "prepare": "husky install"
}

Как наследовать правила из библиотеки

eslint.config.mjs

import factoringPlusConfig from '@factoringplus/frontend-configs/eslint/index.js';
import { includeIgnoreFile } from '@eslint/compat';
import path from 'node:path';
import { fileURLToPath } from 'node:url';

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
const gitignorePath = path.resolve(__dirname, '.gitignore');

/** @type {import('eslint').Linter.Config[]} */
export default [
  includeIgnoreFile(gitignorePath),
  ...factoringPlusConfig,
  // Ваши конфигурации
];

.prettierrc.mjs

import { default as prettierConfig } from '@factoringplus/frontend-configs/prettier/index.js';

export default {
  ...prettierConfig,
  // Ваши конфигурации
};

.stylelintrc.json

{
  "extends": ["@factoringplus/frontend-configs/stylelint"],
  // Ваши конфигурации
}

tsconfig.json

{
  "extends": "@factoringplus/frontend-configs/ts/tsconfig.json",
  // Ваши конфигурации
}

vite.config.ts

import { defineConfig, mergeConfig } from 'vite';
import baseConfig from '@factoringplus/frontend-configs/vite';

const config = defineConfig({
  // Ваши конфигурации
});

export default mergeConfig(baseConfig, config);

Зависимости, которые будут установлены вместе с библиотекой

{
  "@eslint/compat": "^1.2.4",
  "@typescript-eslint/eslint-plugin": "^8.18.0",
  "@vue/eslint-config-typescript": "^14.1.4",
  "eslint": "^9.17.0",
  "eslint-config-prettier": "^9.1.0",
  "eslint-plugin-sonarjs": "^3.0.1",
  "eslint-plugin-vue": "^9.32.0",
  "globals": "^15.13.0",
  "husky": "8.0.0",
  "postcss-preset-env": "8.3.0",
  "prettier": "3.1.1",
  "stylelint": "16.1.0",
  "stylelint-config-html": "1.1.0",
  "stylelint-config-recess-order": "4.4.0",
  "stylelint-config-standard-scss": "13.0.0",
  "stylelint-prettier": "5.0.0",
  "typescript": "5.0.4",
  "typescript-eslint": "^8.18.0",
  "vite-plugin-eslint": "1.8.1",
  "vite-plugin-stylelint": "5.3.1",
  "vite-svg-loader": "4.0.0"
}

Правила конфигурационных файлов

EsLint

import typescriptEslint from '@typescript-eslint/eslint-plugin';
import sonarjs from 'eslint-plugin-sonarjs';
import globals from 'globals';
import parser from 'vue-eslint-parser';
import pluginJs from '@eslint/js';
import tseslint from 'typescript-eslint';
import pluginVue from 'eslint-plugin-vue';
import vueTsEslintConfig from '@vue/eslint-config-typescript';
import eslintConfigPrettier from 'eslint-config-prettier';

/** @type {import('eslint').Linter.Config[]} */
export default [
	{ files: ['**/*.{js,mjs,cjs,ts,vue,jsx,tsx,cts,mts}'] },
	pluginJs.configs.recommended,
	sonarjs.configs.recommended,
	...tseslint.configs.recommended,
	...pluginVue.configs['flat/recommended'],
	...vueTsEslintConfig(),
	{
		plugins: {
			'@typescript-eslint': typescriptEslint,
		},

		languageOptions: {
			globals: {
				...globals.browser,
				...globals.node,
			},

			parser,
			ecmaVersion: 2022,
			sourceType: 'module',

			parserOptions: {
				parser: tseslint.parser,
			},
		},

		rules: {
			'@typescript-eslint/explicit-function-return-type': 'error',
			'@typescript-eslint/explicit-module-boundary-types': 'error',
			'@typescript-eslint/no-empty-function': 'error',
			'@typescript-eslint/no-explicit-any': 'off',
			'@typescript-eslint/no-unused-expressions': [
				'error',
				{
					allowTernary: true,
					allowShortCircuit: true,
				},
			],
			'@typescript-eslint/no-unused-vars': 'error',

			'complexity': ['warn', { max: 20, variant: 'modified' }],
			'no-console': 'off',
			'no-prototype-builtins': 'off',

			'sonarjs/assertions-in-tests': 'off',
			'sonarjs/cognitive-complexity': ['warn', 15],
			'sonarjs/no-hardcoded-passwords': 'off',
			'sonarjs/pseudo-random': 'off',
			'sonarjs/todo-tag': 'warn',
			
			'vue/multi-word-component-names': 0,
			'vue/no-deprecated-slot-attribute': 'off',
			'vue/v-on-event-hyphenation': [
				'warn',
				'always',
				{
					ignore: [],
				},
			],
		},
	},
	eslintConfigPrettier,
];

Stylelint

{
  "extends": ["stylelint-config-standard-scss", "stylelint-config-recess-order"],
  "overrides": [
    {
      "extends": ["stylelint-config-html/vue"],
      "files": ["**/*.vue"]
    },
    {
      "extends": ["stylelint-config-html/html"],
      "files": ["**/*.html"]
    }
  ],
  "plugins": ["stylelint-prettier"],
  "rules": {
    "prettier/prettier": true,
    "selector-class-pattern": null,
    "selector-pseudo-class-no-unknown": [
      true,
      {
        "ignorePseudoClasses": ["deep"]
      }
    ],
    "rule-empty-line-before": null,
    "at-rule-empty-line-before": null,
    "no-descending-specificity": null,
    "selector-id-pattern": null,
    "scss/double-slash-comment-whitespace-inside": null,
    "value-keyword-case": null
  }
}

tsconfig.json

{
  "compilerOptions": {
    "baseUrl": "../../../../",
    "paths": {
      "@/*": ["./src/*"],
      "@factoringplus/pl-components-pack-v3": ["node_modules/@factoringplus/pl-components-pack-v3/dist"],
      "@factoringplus/pl-components-pack-v3/*": ["node_modules/@factoringplus/pl-components-pack-v3/*"]
    },
    "types": ["element-plus/global", "vite/client", "node", "jsdom"],
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "allowJs": false,
    "skipLibCheck": true,
    "composite": true,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "module": "ESNext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "outDir": "build",
    "sourceMap": true,
    "downlevelIteration": true
  }
}

vite.config.ts

const { defineConfig, mergeConfig } = require('vite');
const baseConfig = require('@factoringplus/frontend-configs/vite').default;

const config = defineConfig({
	server: {
		host: true,
		port: 8080,
	},
});

module.exports = mergeConfig(baseConfig, config);

.editorconfig

Обратите внимание, что данный конфиг не наследуется, а только устанавливается в корень проекта.

[*.{js,jsx,ts,tsx,vue,scss}]
indent_style = tab
indent_size = 2
editor.tabSize = 2
end_of_line = lf
trim_trailing_whitespace = false
insert_final_newline = true
max_line_length = 100
editor.insertSpaces = false
editor.detectIndentation = false

pre-commit

Обратите внимание, что данный конфиг не наследуется, а только устанавливается в корень проекта.

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

# git ls-files --others --exclude-standard --exclude=node_modules >> .gitignore
# git status --porcelain | grep '^ M' | cut -c4- | xargs git stash push -m "Temporary changes"
npx eslint --rule '@typescript-eslint/no-unused-vars:error' --ignore-pattern '!src/*/.{ts,vue}' src
npm run lint:scripts
npm run lint:styles:fix
npm run lint:prettier
npx tsc --noEmit
# git add -u
----------

Переход на версию 1.1+

• 1.1.0 Выполнена миграция на ESLint 9, конфигурация Prettier перенесена в .prettierrc.mjs. Добавлена проверка на ошибки TypeScript в прекоммит.

• 1.1.4 Подключен рекомендованный конфиг SonarJS

Для перехода на текущую версию выполните следующие шаги:

1. Обновите Node.js до версии 21+.
2. Поднимите версию библиотеки до текущей.
3. Обновите команды ESLint в package.json (смотри выше).
4. Обновите pre-commit (смотри выше).
5. Перенесите локальные правила ESLint в новый конфиг (eslint.config.mjs) по гайду миграции.
6. Перенесите локальные настройки Prettier в .prettierrc.mjs.
7. Удалите .eslintrc.cjs и старый конфиг Prettier (prettier.js или prettier.cjs).