stylelint-prettier

    1.2.0 • Public • Published

    stylelint-prettier Build Status

    Runs Prettier as a Stylelint rule and reports differences as individual Stylelint issues.

    Sample

    Given the input file style.css:

    .insert {
      display: block
    }
    
    .alter:after {color: red; content: 'example'}
    
    .delete {
      display: block;;
    }

    Running ./node_modules/.bin/stylelint style.css shall output:

    style.css
     2:17  ✖  Insert ";"                                          prettier/prettier
     5:15  ✖  Replace "color:·red;·content:·'example'" with       prettier/prettier
              "⏎··color:·red;⏎··content:·"example";⏎"
     8:17  ✖  Delete ";"                                          prettier/prettier
    

    Installation

    npm install --save-dev stylelint-prettier prettier

    stylelint-prettier does not install Prettier or Stylelint for you. You must install these yourself.

    Then, in your .stylelintrc:

    {
      "plugins": ["stylelint-prettier"],
      "rules": {
        "prettier/prettier": true
      }
    }

    Recommended Configuration

    This plugin works best if you disable all other Stylelint rules relating to code formatting, and only enable rules that detect patterns in the AST. (If another active Stylelint rule disagrees with prettier about how code should be formatted, it will be impossible to avoid lint errors.) You can use stylelint-config-prettier to disable all formatting-related Stylelint rules.

    If your desired formatting does not match the prettier output, you should use a different tool such as prettier-stylelint instead.

    To integrate this plugin with stylelint-config-prettier, you can use the "recommended" configuration:

    1. In addition to the above installation instructions, install stylelint-config-prettier:

      npm install --save-dev stylelint-config-prettier
    2. Then replace the plugins and rules declarations in your .stylelintrc that you added in the prior section with:

      {
        "extends": ["stylelint-prettier/recommended"]
      }

    This does three things:

    1. Enables the stylelint-plugin-prettier plugin.
    2. Enables the prettier/prettier rule.
    3. Extends the stylelint-config-prettier configuration.

    You can then set Prettier's own options inside a .prettierrc file.

    Options

    stylelint-prettier will honor your .prettierrc file by default. You only need this section if you wish to override those settings.

    Note: While it is possible to pass options to Prettier via your Stylelint configuration file, it is not recommended because editor extensions such as prettier-atom and prettier-vscode will read .prettierrc, but won't read settings from Stylelint, which can lead to an inconsistent experience.

    Objects are passed directly to Prettier as options. Example:

    {
      "rules": {
        "prettier/prettier": [true, {"singleQuote": true, "tabWidth": 4}]
      }
    }

    NB: This option will merge and override any config set with .prettierrc files (for Prettier < 1.7.0, config files are ignored)


    Contributing

    See CONTRIBUTING.md

    Inspiration

    The layout for this codebase and base configuration of prettier was taken from https://github.com/prettier/eslint-plugin-prettier

    Install

    npm i stylelint-prettier

    DownloadsWeekly Downloads

    312,998

    Version

    1.2.0

    License

    MIT

    Unpacked Size

    17.4 kB

    Total Files

    7

    Last publish

    Collaborators

    • bpscott