Stylelint config standard css

Customizing

The standard config turns on about half of the built-in rules. Stylelint is capable of so much more. We recommend using the standard config as a foundation and building on top of it.

You can use the other half of the built-in rules to:

These conventions are typically specific to you and your project.

There’s a lot you can do. For example, if you only want to allow:

   "extends": ["stylelint-config-standard"], + "rules":  + "declaration-property-unit-allowed-list":  + "/^border/": ["px"], + "/^padding|^gap/": ["rem"] + >, + "unit-allowed-list": ["%", "deg", "px", "rem", "ms"] + > > 

Or you can enforce the hsl() color notation using the color-named , color-no-hex , function-disallowed-list rules:

   "extends": ["stylelint-config-standard"], + "rules":  + "color-named": "never", + "color-no-hex": true, + "function-disallowed-list": ["rgb", "hwb", "lch"] + > > 

Or you can limit the number of ID selectors using the selector-max-id rule:

   "extends": ["stylelint-config-standard"], + "rules":  + "selector-max-id": 0 + > > 

These are just some of the things you can do with the built-in rules. It’s possible to configure them to enforce strict conventions and keep your CSS under control.

Custom rules​

In addition to the built-in rules, there are custom rules that you can plug into Stylelint.

Custom rules are typically written by communities to support methodologies, toolsets, non-standard CSS features, or very specific use cases.

You can add custom rules to your config by extending a shared config that includes them or by using a plugin directly. For example, you can order your properties by extending the recess order config, which includes the order plugin:

   "extends": [  "stylelint-config-standard" + "stylelint-config-recess-order"  ] > 

Or you can use the plugin directly if, for example, you want to alphabetize your properties:

   "extends": ["stylelint-config-standard"], + "plugins": ["stylelint-order"], + "rules":  + "order/properties-alphabetical-order": true + > > 

Custom rules do all sorts; from enforcing strict BEM conventions to strict scales for numeric values. You’ll find more shared configs and plugins of custom rules listed in Awesome Stylelint.

You can also write your own custom rules within a plugin. This is particularly useful if you have specific needs or conventions you want to enforce.

Strictness​

We recommend you craft a config that strictly enforces your conventions and then use configuration comments to disable specific rules when needed. You needn’t shy away from using them as they are an integral part of Stylelint.

You can use the report* properties in your config to ensure your comments aren’t useless and descriptionless:

   "extends": ["stylelint-config-standard"], + "reportDescriptionlessDisables": true, + "reportInvalidScopeDisables": true, + "reportNeedlessDisables": true > 

Each of these properties is configurable if you need to add exceptions to them.

You can also use the reportDisables secondary property to disallow disables on a per-rule basis.

Using Stylelint​

You can use our Visual Studio Code extension, or one of the other integrations listed in Awesome Stylelint, to get instant feedback in your code editor. This is the quickest way to see and resolve problems.

You don’t have to use the CLI either; we also provide a Node.js API, or you can use one of the other integrations or task runners listed in Awesome Stylelint.

Whichever you choose, there are many options in Stylelint that you can use to customize how Stylelint works. For example, you’ll likely want to use the —fix option to automatically fix as many problems as possible:

You may also want to look into the:

Источник

Getting started

You can quickly get started by extending a shared config.

Linting CSS​

You can extend our standard config to lint CSS.

1 . Use npm and our init tool to install Stylelint and the config:

2 . Run Stylelint on all the CSS files in your project:

Once you’re up and running, you can customize Stylelint.

Linting CSS-like languages and CSS within containers​

You can extend a community config to lint:

  • CSS-like languages, e.g. SCSS, Sass and Less
  • CSS within containers, e.g. in HTML, CSS-in-JS and Vue SFCs

For example, to lint SCSS you can extend the SCSS community config. It includes the:

1 . Use npm to install Stylelint and the config:

npm install --save-dev stylelint stylelint-config-standard-scss 

2 . Create a .stylelintrc.json configuration file in the root of your project with the following content:

  "extends": "stylelint-config-standard-scss" > 

3 . Run Stylelint on all the SCSS files in your project:

You’ll find more community configs in Awesome Stylelint.

Using a custom syntax directly​

If a shared config isn’t available for your preferred language or container, you can install the appropriate custom syntax and use the customSyntax option yourself.

For example, to lint CSS inside of Lit elements.

1 . Use npm to install Stylelint, our standard config and the Lit custom syntax:

npm install --save-dev stylelint stylelint-config-standard postcss-lit 

2 . Create a .stylelintrc.json configuration file in the root of your project with the following content:

  "extends": "stylelint-config-standard", "customSyntax": "postcss-lit" > 

3 . Run Stylelint on all the JavaScript files in your project:

You’ll find more custom syntaxes in Awesome Stylelint.

Using more than one custom syntax​

If you want to lint more than one language or container, you can use the overrides property.

For example, to lint CSS files and the CSS within Lit Elements you can update your configuration to:

  "extends": ["stylelint-config-standard"], "overrides": [   "files": ["*.js"], "customSyntax": "postcss-lit" > ] > 

And then run Stylelint on both your CSS and JavaScript files:

Источник

Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

The standard shareable config for Stylelint

License

stylelint/stylelint-config-standard

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Sign In Required

Please sign in to use Codespaces.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

Bumps [word-wrap](https://github.com/jonschlinkert/word-wrap) from 1.2.3 to 1.2.4. — [Release notes](https://github.com/jonschlinkert/word-wrap/releases) — [Commits](jonschlinkert/word-wrap@1.2.3. 1.2.4) — updated-dependencies: — dependency-name: word-wrap dependency-type: indirect . Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot]

Git stats

Files

Failed to load latest commit information.

README.md

The standard shareable config for Stylelint.

It extends stylelint-config-recommended and turns on additional rules to enforce modern conventions found in the CSS specifications.

To see the rules that this config uses, please read the config itself.

@import url("foo.css"); @import url("bar.css"); @custom-media --foo (min-width: 30em); /** * Multi-line comment */ :root < --brand-red: hsl(5deg 10% 40%); > /* Single-line comment */ .class-foo:not(a, div) < margin: 0; top: calc(100% - 2rem); > /* Flush single line comment */ @media (width >= 60em) < #id-bar < /* Flush to parent comment */ --offset: 0px; color: #fff; font-family: Helvetica, "Arial Black", sans-serif; left: calc(var(--offset) + 50%); > /* Flush nested single line comment */ a::after < display: block; content: "→"; background-image: url("x.svg"); > > @keyframes fade-in < from < opacity: 0; > to < opacity: 1; > >

Note: the config is tested against this example, as such the example contains plenty of CSS syntax and features.

npm install stylelint-config-standard --save-dev

Set your Stylelint config to:

< "extends": "stylelint-config-standard" >

Add a «rules» key to your config, then add your overrides and additions there.

You can turn off rules by setting its value to null . For example:

< "extends": "stylelint-config-standard", "rules": < "selector-class-pattern": null > >

Or lower the severity of a rule to a warning using the severity secondary option. For example:

< "extends": "stylelint-config-standard", "rules": < "property-no-vendor-prefix": [ true, < "severity": "warning" > ] > >

Or to add a rule, For example, the unit-allowed-list one:

< "extends": "stylelint-config-standard", "rules": < "unit-allowed-list": ["em", "rem", "s"] > >

We recommend adding more of Stylelint’s rules to your config as these rules need to be configured to suit your specific needs.

Источник

Читайте также:  Python sys exc info
Оцените статью