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 🙏

© 2024 – Pkg Stats / Ryan Hefner

@axa-ch/easy-config

v2.1.1

Published

Modern and strict configuration files to build consistently web applications.

Downloads

407

Readme

easy-config

Build Status MIT License NPM version NPM downloads

Modern and strict configuration files to build consistently web applications.

Table of content

  1. Getting Started
    1. Installation
    2. Configuration
    3. IDE Integration
  2. Typescript Setup
  3. Stylelint Setup
    1. SCSS Setup
    2. CSS Order Setup

Getting started

Installation

Start by installing BiomeJS, Prettier and @axa-ch/easy-config.

npm i -D --save-exact @biomejs/biome @axa-ch/easy-config prettier

Configuration

Create a biome.json file at the root of your project

{
  "$schema": "https://biomejs.dev/schemas/1.8.3/schema.json",
  "extends": ["./node_modules/@axa-ch/easy-config/biome/base.json"]
}

You can configure this to your liking. Follow the Configuration guide from biome.

To configure prettier, add a .prettierrc.js file with the following content:

import { prettier } from '@axa-ch/easy-config';

export default prettier.base;

Why not use biome format?

Biomes formatting support is currently not developed enough for us to make the full move over to biome. For instance, Biome currently doesn't support CSS Formatting or Markdown. Furthermore, Biome doesn't plan to support SCSS in the foreseeing future, so it makes sense to stick to prettier.

IDE Integration

Biome provides plugins for the most common IDEs:

  • IntelliJ-based products: Biome
  • VSCode Extension: Biome

IntelliJ

When using IntelliJ, Biome and Prettier conflict when trying to run Ctrl+Alt+ Shift+P. This is because Biome is set to run biome check when pressing this shortcut, Prettier is set up to format when this shortcut is used. To avoid this conflict we would recommend Setting the prettier configuration to manual and then checking the Run on 'Reformat Code' action. This way, you can press Ctrl+Alt+L to run Prettier. Alternatively, you can remap either of those commands to different keystrokes.

prettier-config

Typescript setup

Start by installing typescript:

npm i -D --save-exact typescript

Then, create a tsconfig.json file and extend @axa-ch/easy-config:

{
  "extends": ["@axa-ch/easy-config/ts-config/base"]
}

Stylelint setup

Start by installing stylelint and the rules used by easy-config:

npm i -D --save-exact stylelint stylelint-config-standard

Extend easy-config in the .stylelintrc.js file:

import { stylelint } from '@axa-ch/easy-config';

/** @type {import('stylelint').Config} */
export default {
  extends: [stylelint.base],
};

SCSS Setup

To use Stylelint with SASS, start by installing the SCSS default config for stylelint:

npm i -D --save-exact stylelint-config-standard-scss

Extend your stylelint configuration like shown below:

import { stylelint } from '@axa-ch/easy-config';

/** @type {import('stylelint').Config} */
export default {
  extends: [stylelint.base, stylelint.scss],
};

CSS Order Setup

You can install this extension if you want to ensure that CSS Properties are defined in a consistent way.

Start by installing the extension:

npm i -D --save-exact stylelint-order

Extend your stylelint configuration like shown below:

import { stylelint } from '@axa-ch/easy-config';

/** @type {import('stylelint').Config} */
export default {
  extends: [stylelint.base, stylelint.order],
};