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

Установка

npm i @factoringplus/frontend-configs -D

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

Список файлов которые будут установлены в корень проекта в случае их отсутствия:

husky/
.editorconfig
.es
.prettierrc.js
.stylelintignore
.stylelintrc.json
.tsconfig.json
vite.config.ts

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

"scripts": {
    "prepare": "husky install",
    "lint:styles": "stylelint \"**/*.{css,html,vue,scss}\"",
    "lint:styles:fix": "stylelint --fix \"**/*.{css,html,vue,scss}\"",
    "lint:prettier": "prettier --write .",
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --ignore-path .gitignore",
    "lint:scripts": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --ignore-path .gitignore --fix"
}

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

.eslintrc.cjs

module.exports = {
	extends: [require.resolve('@factoringplus/frontend-configs/eslint')],
    /// ваши конфигурации
};

.prettierrc.js

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);

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

{
    "@vue/eslint-config-airbnb": "^7.0.0",
    "@vue/eslint-config-prettier": "^7.1.0",
    "@vue/eslint-config-typescript": "^11.0.2",
    "@typescript-eslint/eslint-plugin": "^5.57.0",
    "@typescript-eslint/parser": "^5.57.0",
    "eslint": "^8.37.0",
    "eslint-config-prettier": "^8.8.0",
    "eslint-plugin-import": "^2.27.5",
    "eslint-plugin-prettier": "^5.0.0",
    "eslint-plugin-vue": "^9.10.0",
    "eslint-plugin-vuejs-accessibility": "^2.1.0",
    "postcss-preset-env": "^8.3.0",
    "prettier": "^3.1.1",
    "vite-plugin-eslint": "^1.8.1",
    "vite-plugin-stylelint": "^5.3.1",
    "vite-svg-loader": "^4.0.0",
    "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",
    "husky": "^8.0.0"
  }

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

EsLint

{
	root: true,
	env: {
		node: true,
	},
	extends: [
		'plugin:vue/vue3-recommended',
		'eslint:recommended',
		'@vue/typescript/recommended',
		'@vue/eslint-config-prettier',
		'@vue/eslint-config-typescript',
	],
	parser: 'vue-eslint-parser',
	parserOptions: {
		ecmaVersion: 2022,
		parser: '@typescript-eslint/parser',
		sourceType: 'module',
	},
	plugins: ['@typescript-eslint'],
	rules: {
		'no-console': process.env.NODE_ENV === 'production' ? 'off' : 'off',
		'vue/no-deprecated-slot-attribute': 'off',
		'vue/multi-word-component-names': 0,
		'vue/v-on-event-hyphenation': [
			'warn',
			'always',
			{
				ignore: [],
			},
		],
		'@typescript-eslint/no-unused-expressions': ['error', { allowTernary: true, allowShortCircuit: true, }],
	},
	overrides: [
		{
			files: ['*.ts', '*.vue'],
			rules: {
				'@typescript-eslint/no-empty-function': 'error',
				'@typescript-eslint/no-explicit-any': 'off',
				'@typescript-eslint/explicit-function-return-type': 'error',
				'@typescript-eslint/explicit-module-boundary-types': 'error',
				'@typescript-eslint/no-unused-vars': 'error',
			},
		},
	],
};

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
	}
}

TypeScript

{
	"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

const { defineConfig } = require('vite');
const vue = require('@vitejs/plugin-vue');
const eslintPlugin = require('vite-plugin-eslint').default;
const svgLoader = require('vite-svg-loader');
const postcssPresetEnv = require('postcss-preset-env');
const stylelintPlugin = require('vite-plugin-stylelint');

module.exports = defineConfig({
	optimizeDeps: {
		force: true,
	},
	resolve: {
		alias: [{ find: '@', replacement: '/src' }],
	},
	build: {
		minify: true,
		rollupOptions: {
			output: {
				manualChunks(id) {
					if (id.includes('@factoringplus')) {
						return 'factoringplus';
					}

					if (id.includes('element-plus')) {
						return 'element-plus';
					}

					if (id.includes('node_modules/crypto-pro')) {
						return 'crypto-pro';
					}

					if (id.includes('node_modules')) {
						return 'vendor';
					}
				},
			},
		},
	},
	css: {
		devSourcemap: true,
		postcss: {
			plugins: [postcssPresetEnv()],
		},
	},
	plugins: [
		vue(),
		process.env.NODE_ENV !== 'production' && eslintPlugin(),
		svgLoader({
			defaultImport: 'url',
		}),
		process.env.NODE_ENV !== 'production' && stylelintPlugin({
			fix: true,
			lintOnStart: true,
			emitError: false,
		}),
	].filter(Boolean), // Убедитесь, что все плагины определены
});

.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' --ext .ts,.vue src
npm run lint:scripts
npm run lint:styles:fix
npm run lint:prettier
# git add -u