Frontend Configs

👉 If you want to integrate these configs into Quasar, be sure to read the Quasar integration specifics section below!

This repository is intended to standardize and centralize formatting and linting across all of my projects. You can always override any rules to suit a specific project's needs.

Quick Start

IMPORTANT! Before installing this package, remove eslint, stylelint, @stylistic/*, @typescript-eslint/* and any other linting/formatting-related packages from your project. The correct versions of those dependencies will be installed automatically when you install this package.

IMPORTANT! As you'll see further down in this README, the project is flexible and supports overrides at every level.

1. Open the target project.
2. Install the package:

npm i @cherepanov.pavel/shareable-config

3. Copy the config files:

   • eslint.config.js
   • stylelint.config.js

   For now, simply copy these files from this repository into your project. Please copy them as-is and use the override functions. They may be generated by the package in future versions. It's important that your changes aren't overwritten later.

4. Update imports:

Before:

import {
	...
} from "./modules/eslint-config";
import {
	...
} from "./modules/eslint-config/constants/severity.js";

After:

import {
  globalConfig,
  jsConfig,
  tsConfig,
  vueConfig,
} from '@cherepanov.pavel/shareable-config/eslint-config';
import {
 	OFF,
	WARN,
	ERROR,
} from '@cherepanov.pavel/shareable-config/eslint-config/constants/severity.js';

Before:

import {
	baseConfig,
} from "./modules/stylelint-config";

After:

import {
	baseConfig
} from '@cherepanov.pavel/shareable-config/stylelint-config';

5. Override rules via the override function in your own configs where needed.

Working with configuration files

Generated files

• .editorconfig
• .gitattributes
• .gitignore
• extensions.json
• settings.json

Once you have completed the Quick Start steps, run:

npx -p "@cherepanov.pavel/shareable-config" set-env

Then run:

npx -p "@cherepanov.pavel/shareable-config" get-all

or run any other command if you want to update partially.

See the full list of commands in the bin section of package.json.

How to make your changes and keep receiving updates

For non-JSON files (.editorconfig, .gitattributes, .gitignore)

1. Append the comment # override at the end of the file.
2. After that, add your project-specific rules.

Example:

# ...base rules...

# override
# Your project-specific rules

During package updates, only the content above # override will be changed.

For JSON files

Overriding keys

Add the comment // override at the end of the object and include new or changed keys.

Before:

{
  "recommendations": [
    "eamodio.gitlens",
    "vue.volar"
  ]
}

After:

{
  "recommendations": [
    "eamodio.gitlens",
    "vue.volar"
  ],
  // override
  "recommendations": [],
  "my-recommendations": [
    "some-content"
  ]
}

Adding and removing array items

Add the comment // override at the end of the array. Commented-out lines within the override block will be removed from the final array.

Before:

{
  "recommendations": [
    "eamodio.gitlens",
    "vue.volar"
  ]
}

After:

{
  "recommendations": [
    "eamodio.gitlens",
    "vue.volar",
    // override
    "redhat.vscode-yaml"
    //"vue.volar"
  ]
}

• "redhat.vscode-yaml" will be added.
• "vue.volar" will be removed from the final array.

This works for nested objects and arrays as well!

Summary

Use this repository as a single source for configs. Only override what you need using the override mechanism. Receive updates without losing your custom changes.

Quasar integration notes

When applying these configs to Quasar projects you may encounter a few additional issues. Below are recommendations for correct integration:

1. eslint version compatibility

Quasar (@quasar/app-vite) declares a peer dependency:

peer eslint@"^6.0.0 || ^7.0.0 || >=8.0.0"

but these configs require [email protected].

Solution:

• Create a .npmrc file in the project root if it doesn't already exist.
• Add this line:

  legacy-peer-deps=true

• Then run:

  npm install [email protected] -D

• This pins the required eslint version in your project.

2. Correct component import casing

By default, Quasar auto-imports components in kebab-case, while our linting configs require PascalCase.

Solution:

• In quasar.config.js set the option:

  autoImportComponentCase: 'pascal', // or 'combined'

• More info: Quasar: autoImportComponentCase

3. Config file formats

Quasar projects typically don't have type: "module" in package.json by default, so to make configs work correctly:

• Rename the config files:
  • stylelint.config.js → stylelint.config.mjs
  • eslint.config.js → eslint.config.mjs

or use the .mts extension for TypeScript-based configs.