@naverpay/stylelint-config NPM

@naverpay/stylelint-config

This package provides a stylelint-config compliant with the Naver Pay style guide.

Install

Install the stylelint and @naverpay/stylelint-config packages.

npm install -D stylelint@^16 @naverpay/stylelint-config

Configure

Create a stylelint.config.mjs file. The default value for defaultSeverity is warning.

/** @type {import('stylelint').Config} */
const config = {
  extends: ['@naverpay/stylelint-config'],
  defaultSeverity: 'error',
  rules: {},
}

export default config

Only pure ESM is supported. Please create the file with an .mjs extension or add "type": "module" to your package.json.

CLI

You can add scripts to your package.json to perform format checks.

// package.json
{
    "scripts": {
        "stylelint": "stylelint '**/*.{css,scss}'",
        "stylelint:fix": "stylelint --fix '**/*.{css,scss}'",
    },
}

Since stylelint@15.x, formatting rules that Prettier can handle have been delegated to Prettier. Therefore, files linted by Stylelint must also be processed by Prettier. https://github.com/stylelint/stylelint/blob/1c17fb87a2f16f041632e380dd0d600cb3532337/docs/migration-guide/to-15.md
It is recommended to automate style checks before commits or pushes using lefthook.

Integrating with IDE

VSCode

With the Stylelint extension, some properties can be automatically fixed on file save.

To prevent auto-fixing in projects not using Stylelint, create a .vscode/settings.json file in your project's root folder.

After installing the Stylelint extension, create a .vscode/settings.json file in your project's root folder.

{
    "css.validate": false,
    "less.validate": false,
    "scss.validate": false,
    "[css]": {
        "editor.formatOnSave": false,
        "editor.codeActionsOnSave": {
            "source.fixAll.stylelint": true
        }
    },
    "[scss]": {
        "editor.formatOnSave": false,
        "editor.codeActionsOnSave": {
            "source.fixAll.stylelint": true
        }
    },
    "stylelint.validate": ["css", "scss"]
}

Now, stylelint --fix will run automatically when you save *.{css,scss} files.