@flarian/frontend-preset 1.6.1 → 2.0.0

package/README.md

@@ -1,176 +1,295 @@
-# frontend-preset
-
-## Поддерживаемые форматы:
-- .js
-- .jsx
-- .ts
-- .tsx
-- .json
-- .css
-- .less
-- .scss
-- .vue
-- .pug
-- .yml
-- .yaml
-
-## Установка
+# @flarian/frontend-preset
+
+Preset for ESLint, Prettier and Stylelint with flat config support.
+
+## Supported formats
+
+`.js` `.jsx` `.ts` `.tsx` `.json` `.jsonc` `.css` `.less` `.scss` `.vue` `.pug` `.yml` `.yaml`
+
+---
+
+## ESLint
+
+### JavaScript
+
 ```sh
-pnpm add @flarian/frontend-preset eslint prettier stylelint -D
+pnpm add -D eslint @eslint/js globals @flarian/frontend-preset
 ```
 
-## tsconfig.json
-```json
-{
-	"compilerOptions": {
-		"target": "esnext",
-		"module": "esnext",
-		"moduleResolution": "node",
-		"esModuleInterop": true,
-		"strict": true,
-		"strictNullChecks": true,
-		"noUnusedLocals": true,
-		"jsx": "preserve",
-		"resolveJsonModule": true,
-		"outDir": "dist",
-		"baseUrl": ".",
-		"declaration": true,
-		"declarationMap": true,
-	},
-}
+```ts
+// eslint.config.ts
+import { javascript } from '@flarian/frontend-preset/eslint';
+
+export default [
+	...javascript,
+	{ ignores: ['dist/**', 'node_modules/**'] },
+];
 ```
 
-## Для поддержки PUG синтаксиса в .vue:
+---
+
+### TypeScript
+
+Requires JavaScript config.
+
 ```sh
-pnpm add pug @vue/language-plugin-pug -D
+pnpm add -D typescript-eslint
 ```
-Добавить в tsconfig.json:
-```json
-{
-	"vueCompilerOptions": {
-		"plugins": ["@vue/language-plugin-pug"]
-	},
-}
+
+```ts
+// eslint.config.ts
+import { javascript, typescript } from '@flarian/frontend-preset/eslint';
+
+export default [
+	...javascript,
+	...typescript,
+	{ ignores: ['dist/**', 'node_modules/**'] },
+];
 ```
 
-## Расширения vsCode:
-- [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
-- [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
-- [Stylelint](https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint)
-- [EditorConfig](https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig)
+---
+
+### Stylistic
+
+Formatting rules via `@stylistic/eslint-plugin`. Use together with Prettier or standalone.
+
+```sh
+pnpm add -D @stylistic/eslint-plugin
+```
 
-## Примеры конфигураций:
-### Настройка ESLint
-#### eslint.config.ts
 ```ts
-import { all } from '@flarian/frontend-preset/eslint';
+// eslint.config.ts
+import { javascript, typescript, stylistic } from '@flarian/frontend-preset/eslint';
 
 export default [
-	...all.withApp,
+	...javascript,
+	...typescript,
+	...stylistic,
+	{ ignores: ['dist/**', 'node_modules/**'] },
+];
+```
 
-	{
-		ignores: ['dist/**', 'node_modules/**', 'pnpm-lock.yaml'],
-	},
+---
+
+### Imports
+
+Sorts and validates imports via `eslint-plugin-simple-import-sort`.
+
+```sh
+pnpm add -D eslint-plugin-simple-import-sort
+```
+
+```ts
+// eslint.config.ts
+import { javascript, typescript, imports } from '@flarian/frontend-preset/eslint';
+
+export default [
+	...javascript,
+	...typescript,
+	...imports,
+	{ ignores: ['dist/**', 'node_modules/**'] },
 ];
 ```
 
 ---
 
-### Настройка prettier
-- Если вы не используете синтаксис pug в вашем vue проекте то вы можете пропустить этот шаг.
-- Если вы используете Pug в Vue проекте, то необходимо добавить зависимость @prettier/plugin-pug в ваш проект и определить конфигурацию prettier.config.mjs:
+### JSON / package.json / tsconfig.json
+
 ```sh
-pnpm add @prettier/plugin-pug -D
+pnpm add -D eslint-plugin-jsonc
 ```
 
-#### prettier.config.mjs
-```js
-import { all } from '@flarian/frontend-preset/prettier';
+```ts
+// eslint.config.ts
+import { json, packageJson, tsconfigJson } from '@flarian/frontend-preset/eslint';
+
+export default [
+	...json,
+	...packageJson,
+	...tsconfigJson,
+	{ ignores: ['dist/**', 'node_modules/**'] },
+];
+```
+
+---
+
+### JSX
+
+Stylistic rules for JSX. Requires `stylistic`.
+
+No additional dependencies required.
+
+```ts
+// eslint.config.ts
+import { javascript, stylistic, jsx } from '@flarian/frontend-preset/eslint';
+
+export default [
+	...javascript,
+	...stylistic,
+	...jsx,
+	{ ignores: ['dist/**', 'node_modules/**'] },
+];
+```
+
+---
+
+### Vue
+
+```sh
+pnpm add -D eslint-plugin-vue vue-eslint-parser
+```
+
+```ts
+// eslint.config.ts
+import { javascript, typescript, stylistic, imports, vue } from '@flarian/frontend-preset/eslint';
 
-export default all;
+export default [
+	...javascript,
+	...typescript,
+	...stylistic,
+	...imports,
+	...vue,
+	{ ignores: ['dist/**', 'node_modules/**'] },
+];
 ```
 
 ---
 
-### Настройка stylelint
-В зависимости от используемого препроцессора (LESS или SCSS), необходимо установить дополнительные зависимости:
+### React
 
-#### Для LESS:
 ```sh
-pnpm add stylelint-order stylelint-less stylelint-config-standard stylelint-config-standard-less stylelint-config-recommended-vue -D
+pnpm add -D eslint-plugin-react eslint-plugin-react-hooks
 ```
 
-#### Для SCSS:
+```ts
+// eslint.config.ts
+import { javascript, typescript, stylistic, imports, jsx, react } from '@flarian/frontend-preset/eslint';
+
+export default [
+	...javascript,
+	...typescript,
+	...stylistic,
+	...imports,
+	...jsx,
+	...react,
+	{ ignores: ['dist/**', 'node_modules/**'] },
+];
+```
+
+---
+
+### Prettier (ESLint integration)
+
+Runs Prettier as an ESLint rule. Automatically applies Vue, Pug and YAML overrides for `.vue` files.
+
 ```sh
-pnpm add stylelint-order stylelint-scss stylelint-config-standard stylelint-config-standard-scss stylelint-config-recommended-vue -D
+pnpm add -D prettier eslint-plugin-prettier
 ```
 
-#### stylelint.config.mjs
-```js
-import { all } from '@flarian/frontend-preset/stylelint';
+For Pug support in `.vue` files:
 
-export default {
-	extends: [all.less, all.scss],
-};
+```sh
+pnpm add -D @prettier/plugin-pug
 ```
 
-**Примечание:** Используйте только нужные пресеты в `extends`. Например, если работаете только с LESS:
-```js
+```ts
+// eslint.config.ts
+import { javascript, typescript, stylistic, imports, vue, prettier } from '@flarian/frontend-preset/eslint';
+
+export default [
+	...javascript,
+	...typescript,
+	...stylistic,
+	...imports,
+	...vue,
+	...prettier,  // must be last
+	{ ignores: ['dist/**', 'node_modules/**'] },
+];
+```
+
+---
+
+## Prettier
+
+```sh
+pnpm add -D prettier
+```
+
+```ts
+// prettier.config.ts
+import { baseConfig } from '@flarian/frontend-preset/prettier';
+
+export default baseConfig;
+```
+
+For Vue + Pug projects:
+
+```sh
+pnpm add -D @prettier/plugin-pug
+```
+
+```ts
+// prettier.config.ts
+import { baseConfig, pugConfig, vueConfig, ymlConfig } from '@flarian/frontend-preset/prettier';
+
 export default {
-	extends: [all.less],
+	...baseConfig,
+	...vueConfig,
+	...ymlConfig,
+	...pugConfig,
 };
 ```
 
-## .editorconfig
-```ini
-root = true
+---
 
-# Блок настроек для всех типов файлов
-[*]
-charset = utf-8
-end_of_line = lf
-indent_size = 4
-indent_style = tab
-insert_final_newline = true
-trim_trailing_whitespace = true
+## Stylelint
 
-# Блок настроек для Markdown
-[*.{md,markdown}]
-trim_trailing_whitespace = false
+### LESS
 
-# Блок настроек для файлов JavaScript и TypeScript
-[*.{js,ts,jsx,tsx,cjs,mjs,vue}]
-indent_style = tab
-indent_size = 4
+```sh
+pnpm add -D stylelint stylelint-order stylelint-less stylelint-config-standard stylelint-config-standard-less stylelint-config-recommended-vue
+```
 
-# Блок настроек для файлов css
-[*.{css,less}]
-indent_style = tab
-indent_size = 4
+```js
+// stylelint.config.mjs
+import { less } from '@flarian/frontend-preset/stylelint';
 
-# Блок настроек для файлов JSON
-[*.{json}]
-indent_style = tab
-indent_size = 4
+export default { extends: [less] };
+```
 
-# Блок настроек для YAML
-[*.{yaml,yml}]
-indent_style = space
-indent_size = 2
+### SCSS
+
+```sh
+pnpm add -D stylelint stylelint-order stylelint-scss stylelint-config-standard stylelint-config-standard-scss stylelint-config-recommended-vue
 ```
 
-## Пример конфигурации для VSCode:
+```js
+// stylelint.config.mjs
+import { scss } from '@flarian/frontend-preset/stylelint';
+
+export default { extends: [scss] };
+```
+
+---
+
+## VSCode extensions
+
+- [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
+- [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
+- [Stylelint](https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint)
+- [EditorConfig](https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig)
+
+## VSCode settings
+
 ```json
 {
-	/* Language settings */
 	"[css]": {
 		"editor.defaultFormatter": "stylelint.vscode-stylelint",
 		"editor.formatOnSave": true
 	},
 	"[javascript]": {
 		"editor.defaultFormatter": "dbaeumer.vscode-eslint",
-		"editor.formatOnSave": true,
-		"editor.suggest.insertMode": "replace"
+		"editor.formatOnSave": true
 	},
 	"[json]": {
 		"editor.defaultFormatter": "dbaeumer.vscode-eslint",
@@ -196,25 +315,46 @@ indent_size = 2
 		"editor.defaultFormatter": "redhat.vscode-yaml",
 		"editor.formatOnSave": true
 	},
-
-	/* Editor */
-	"editor.accessibilitySupport": "off",
 	"editor.codeActionsOnSave": {
 		"source.fixAll.eslint": "explicit",
 		"source.fixAll.stylelint": "always"
 	},
-
-	/* ESLint */
 	"eslint.format.enable": true,
 	"eslint.validate": ["json", "jsonc", "javascript", "typescript", "vue", "yaml", "yml"],
-
-	/* JSON */
-	"json.format.enable": true,
-	"json.format.keepLines": false,
-	"json.validate.enable": false,
-
-	/* Stylelint */
 	"stylelint.packageManager": "pnpm",
-	"stylelint.validate": ["css", "less", "postcss", "scss", "vue", "sass"],
+	"stylelint.validate": ["css", "less", "postcss", "scss", "vue", "sass"]
 }
 ```
+
+## .editorconfig
+
+```ini
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_size = 4
+indent_style = tab
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.{md,markdown}]
+trim_trailing_whitespace = false
+
+[*.{js,ts,jsx,tsx,cjs,mjs,vue}]
+indent_style = tab
+indent_size = 4
+
+[*.{css,less}]
+indent_style = tab
+indent_size = 4
+
+[*.{json}]
+indent_style = tab
+indent_size = 4
+
+[*.{yaml,yml}]
+indent_style = space
+indent_size = 2
+```

package/dist/eslint/config/imports.cjs

@@ -1,12 +1,13 @@
 'use strict';
 
+const stripPlugins = require('../../shared/frontend-preset.Cco7BHYd.cjs');
 const simpleImportSort = require('eslint-plugin-simple-import-sort');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e.default : e; }
 
 const simpleImportSort__default = /*#__PURE__*/_interopDefaultCompat(simpleImportSort);
 
-const esLintImportSortRules = {
+const esLintImportsRules = {
   files: ["**/*.{js,ts,jsx,tsx,cjs,mjs,vue}"],
   plugins: {
     "@simple-import-sort": simpleImportSort__default
@@ -31,6 +32,10 @@ const esLintImportSortRules = {
   }
 };
 
-const importsConfig = [esLintImportSortRules];
+const createImportsConfig = ({ registerPlugins = true } = {}) => [
+  registerPlugins ? esLintImportsRules : stripPlugins.stripPlugins(esLintImportsRules)
+];
+const imports = createImportsConfig();
 
-exports.importsConfig = importsConfig;
+exports.createImportsConfig = createImportsConfig;
+exports.imports = imports;

package/dist/eslint/config/imports.d.cts

@@ -1,5 +1,7 @@
-import { Linter } from 'eslint';
+import { C as Config, a as CreateConfig } from '../../shared/frontend-preset.DEAWyl_Y.cjs';
+import 'eslint';
 
-declare const importsConfig: Linter.Config[];
+declare const createImportsConfig: CreateConfig;
+declare const imports: Config;
 
-export { importsConfig };
+export { createImportsConfig, imports };

package/dist/eslint/config/imports.d.mts

@@ -1,5 +1,7 @@
-import { Linter } from 'eslint';
+import { C as Config, a as CreateConfig } from '../../shared/frontend-preset.DEAWyl_Y.mjs';
+import 'eslint';
 
-declare const importsConfig: Linter.Config[];
+declare const createImportsConfig: CreateConfig;
+declare const imports: Config;
 
-export { importsConfig };
+export { createImportsConfig, imports };

package/dist/eslint/config/imports.d.ts

@@ -1,5 +1,7 @@
-import { Linter } from 'eslint';
+import { C as Config, a as CreateConfig } from '../../shared/frontend-preset.DEAWyl_Y.js';
+import 'eslint';
 
-declare const importsConfig: Linter.Config[];
+declare const createImportsConfig: CreateConfig;
+declare const imports: Config;
 
-export { importsConfig };
+export { createImportsConfig, imports };

package/dist/eslint/config/imports.mjs

@@ -1,6 +1,7 @@
+import { s as stripPlugins } from '../../shared/frontend-preset.CtslHPdG.mjs';
 import simpleImportSort from 'eslint-plugin-simple-import-sort';
 
-const esLintImportSortRules = {
+const esLintImportsRules = {
   files: ["**/*.{js,ts,jsx,tsx,cjs,mjs,vue}"],
   plugins: {
     "@simple-import-sort": simpleImportSort
@@ -25,6 +26,9 @@ const esLintImportSortRules = {
   }
 };
 
-const importsConfig = [esLintImportSortRules];
+const createImportsConfig = ({ registerPlugins = true } = {}) => [
+  registerPlugins ? esLintImportsRules : stripPlugins(esLintImportsRules)
+];
+const imports = createImportsConfig();
 
-export { importsConfig };
+export { createImportsConfig, imports };

package/dist/eslint/config/javascript.cjs

@@ -0,0 +1,72 @@
+'use strict';
+
+const globals = require('globals');
+const jsPlugin = require('@eslint/js');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e.default : e; }
+
+const globals__default = /*#__PURE__*/_interopDefaultCompat(globals);
+const jsPlugin__default = /*#__PURE__*/_interopDefaultCompat(jsPlugin);
+
+const esLintJavaScriptRules = {
+  rules: {
+    "arrow-body-style": ["error", "as-needed"],
+    curly: ["error", "all"],
+    "func-names": ["error", "always"],
+    "no-undef": "off",
+    "no-alert": "error",
+    "no-console": "error",
+    "no-var": "error",
+    "no-duplicate-imports": [
+      "error",
+      {
+        includeExports: true
+      }
+    ],
+    "no-magic-numbers": [
+      "error",
+      {
+        ignore: [-1, 0, 1],
+        ignoreArrayIndexes: true,
+        ignoreDefaultValues: true,
+        enforceConst: true
+      }
+    ],
+    "no-plusplus": "off",
+    "no-restricted-syntax": [
+      "error",
+      {
+        selector: "ForInStatement",
+        message: "for..in loops iterate over the entire prototype chain, which is virtually never what you want. Use Object.{keys,values,entries}, and iterate over the resulting array."
+      },
+      {
+        selector: "LabeledStatement",
+        message: "Labels are a form of GOTO; using them makes code confusing and hard to maintain and understand."
+      },
+      {
+        selector: "WithStatement",
+        message: "`with` is disallowed in strict mode because it makes code impossible to predict and optimize."
+      }
+    ],
+    "no-unused-expressions": [
+      "error",
+      {
+        allowShortCircuit: true
+      }
+    ]
+  }
+};
+
+const createJavascriptConfig = () => [
+  {
+    languageOptions: {
+      globals: { ...globals__default.browser, ...globals__default.node }
+    }
+  },
+  jsPlugin__default.configs.recommended,
+  esLintJavaScriptRules
+];
+const javascript = createJavascriptConfig();
+
+exports.createJavascriptConfig = createJavascriptConfig;
+exports.javascript = javascript;

package/dist/eslint/config/javascript.d.cts

@@ -0,0 +1,7 @@
+import { C as Config } from '../../shared/frontend-preset.DEAWyl_Y.cjs';
+import 'eslint';
+
+declare const createJavascriptConfig: () => Config;
+declare const javascript: Config;
+
+export { createJavascriptConfig, javascript };

package/dist/eslint/config/javascript.d.mts

@@ -0,0 +1,7 @@
+import { C as Config } from '../../shared/frontend-preset.DEAWyl_Y.mjs';
+import 'eslint';
+
+declare const createJavascriptConfig: () => Config;
+declare const javascript: Config;
+
+export { createJavascriptConfig, javascript };

package/dist/eslint/config/javascript.d.ts

@@ -0,0 +1,7 @@
+import { C as Config } from '../../shared/frontend-preset.DEAWyl_Y.js';
+import 'eslint';
+
+declare const createJavascriptConfig: () => Config;
+declare const javascript: Config;
+
+export { createJavascriptConfig, javascript };