@factoringplus/frontend-configs
v1.1.5
Published
A package with dependencies and configuration files
Downloads
1,012
Maintainers
Keywords
Readme
Библиотека конфигураций инструментов разработки
Оглавление
- Установка
- Как наследовать правила из библиотеки
- Зависимости, которые будут установлены вместе с библиотекой
- Правила конфигурационных файлов
- Переход на версию 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
Для перехода на текущую версию выполните следующие шаги:
- Обновите Node.js до версии 21+.
- Поднимите версию библиотеки до текущей.
- Обновите команды ESLint в
package.json
(смотри выше). - Обновите
pre-commit
(смотри выше). - Перенесите локальные правила ESLint в новый конфиг (
eslint.config.mjs
) по гайду миграции. - Перенесите локальные настройки Prettier в
.prettierrc.mjs
. - Удалите
.eslintrc.cjs
и старый конфиг Prettier (prettier.js
илиprettier.cjs
).