Skip to content

condorheroblog/stylelint-config

Repository files navigation

@condorhero/stylelint-config

My stylelint config presets

NPM version NPM Downloads

Note: Less not supported, please see stylelint-config-less

  • The(stylelint-config-standard) standard shareable config for Stylelint.
  • stylelint-config-recess-order is Recess-based property sort order for Stylelint.
  • Lint also for CSS, HTML, markdown, css-modules, bem, SCSS, css-in-js.
  • Auto fix for formatting.
  • CSS, Sass, JSS...out-of-box.
  • Sorted CSS properties.

Usage

Install

pnpm add -D eslint @condorhero/stylelint-config

Config .stylelintrc

{
  "extends": "@condorhero/stylelint-config"
}

You can use a .stylelintignore file to ignore specific files, Alternatively, you can add an ignoreFiles property within your configuration object.It is recommended to use the CLI command to specify the format file suffix, For example: stylelint src/**/*.{css,html,md}).

Add script for package.json

For example:

{
  "scripts": {
    "stylelint": "stylelint .",
    "stylelint:fix": "stylelint . --fix"
  }
}

Config VS Code auto fix

Create .vscode/settings.json

{
  "css.validate": false,
  "less.validate": false,
  "scss.validate": false,

  "editor.formatOnSave": false,
  "editor.codeActionsOnSave": {
    "source.fixAll.stylelint": true
  },
  "files.autoSaveDelay": 500,
}

source: stylelint/vscode-stylelint#35

Other Stylelint presets

Contribution Guide

Hey there! We are really excited that you are interested in contributing. This is a general contribution guide. Before submitting your contribution, please make sure to take a moment and read through the following guide:

PackageManager

Update Dependencies

Keeping dependencies up-to-date is one of the important aspects to keep projects alive and getting latest bug fixes on time. We recommend to update dependencies in weekly or bi-weekly intervals.

We use taze to update the dependencies manually most of the time. As deps updating bots like Dependabot or Renovate could be a bit annoying when you have a lot projects.

With taze, you can run taze major -Ir to check and select the versions to update interactive. -I stands for --interactive, -r stands for --recursive for monorepo.

I usually use:

taze -r major && taze -w

After bumpping, we install them, runing build and test to verify nothing breaks before pushing to main.

monorepo

stylelint-config

for npm(My backup)
# add a monorepo,package.json adds a new field workspaces, which you can also add manually
npm init -w ./packages/typescript

# Run "test" script on all packages
npm run test --workspaces
# Tip - this also works:
npm run test  -ws

# To run a command for a specific package, add the --workspace (singular) flag:
# Runs "test" only on package-a
npm run test --workspace package-a

# Tip - this also works:
npm run test -w package-a

for pnpm:
# add a file pnpm-workspace.yaml
# for example:
packages:
  - 'packages/*'


# Run "test" script on all packages
pnpm run test -r
# Tip - this also works:
pnpm run test --recursive

# To run a command for a specific package, add the --workspace and --filter flag:
# Runs "test" only on package-a
npm run test --recursive --filter="package-a"

# Tip - this also works:
npm run test -r -F="package-a"

Note: pnpm -w is --workspace-root Run as if pnpm was started in the root of the workspace instead of the current working directory.


Commit Convention

We use Conventional Commits for commit messages, which allows the changelog to be auto-generated based on the commits. Please read the guide through if you aren't familiar with it already.

EditorConfig

EditorConfig helps maintain consistent coding styles for multiple developers working on the same project across various editors and IDEs.

VS Code need download Plugin - EditorConfig for VS Code.

License

MIT