@factoringplus/frontend-configs v1.0.6
Библиотека конфигураций инструментов разработки
Установка
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
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago