npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2025 – Pkg Stats / Ryan Hefner

@factoringplus/frontend-configs

v1.1.5

Published

A package with dependencies and configuration files

Downloads

1,012

Readme

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

Оглавление

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