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

Установка

npm i @factoringplus/frontend-configs

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

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

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

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

{
    "@typescript-eslint/eslint-plugin": "*",
    "@typescript-eslint/parser": "*",
    "@vue/eslint-config-airbnb": "*",
    "@vue/eslint-config-prettier": "*",
    "@vue/eslint-config-typescript": "*",
    "eslint": "*",
    "eslint-config-prettier": "*",
    "eslint-plugin-import": "*",
    "eslint-plugin-prettier": "*",
    "eslint-plugin-vue": "*",
    "eslint-plugin-vuejs-accessibility": "*",
    "postcss-preset-env": "*",
    "prettier": "*",
    "stylelint": "*",
    "stylelint-config-html": "*",
    "stylelint-config-recess-order": "*",
    "stylelint-config-standard-scss": "*",
    "stylelint-prettier": "*",
    "typescript": "*",
    "vite-plugin-eslint": "*",
    "vite-plugin-stylelint": "*",
    "vite-svg-loader": "*"
  }

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

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-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': 'warn',
	},
};

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

import { defineConfig, UserConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import eslintPlugin from 'vite-plugin-eslint';
import svgLoader from 'vite-svg-loader';
import postcssPresetEnv from 'postcss-preset-env';
import stylelintPlugin from 'vite-plugin-stylelint';

const config: UserConfig = 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
# git add -u