stylelint-config-topxel v2.0.0
stylelint-config-topxel
Topxel's shareable rules and configuration for stylelint: a mighty, modern CSS linter and fixer that helps you avoid errors and enforce consistent conventions in your stylesheets.
Use it as is or as a foundation for your own custom stylint configuration.
This configuration has been modified for its use with styled-components
. That's why some rules have been disabled or adjusted to prevent false errors.
Installation
Install stylelint
and stylelint-config-topxel
either with Yarn or npm:
With Yarn
yarn add --dev stylelint stylelint-config-topxel
With npm
npm install --save-dev stylelint stylelint-config-topxel
Setup
Topxel's shareable stylelint rules are bundled in stylelint-config-topxel
package. To enable these rules add a stylelint
property in your package.json
or create a .stylelintrc
file in the root directory. Although we encourage using the first method to avoid having hidden files in your project. See the stylelint configuration docs for more details.
{
"stylelint": {
"extends": "stylelint-config-topxel"
}
}
Using the linter in the CLI
You can run stylelint by adding a custom linting script to your package.json
. Keep in mind that you must provide the specific relative path where your css files are located. See the stylelint CLI docs for more details.
{
"scripts": {
"stylelint": "stylelint 'example/styles/*.css'"
}
}
Running the script with Yarn
yarn run stylelint
Running the script with npm
npm run stylelint
Using the linter with your favourite code editor
Running the linter in the CLI is great but it doesn't provide instant feedback while you are writing your code. That's why we always encourage our team to extend the code editor with some tools that can help with this task.
Any of the extensions bellow will read your config from package.json
or .stylelintrc
and start live linting your css files inside the editor, so no further configuration is needed.
Atom
Use the apm
command to install linter and linter-stylelint Atom packages. If the apm
command is not available in your shell, check that the Atom Shell Commands
are installed.
apm install linter linter-stylelint
VSCode
- Run Install extension command from Command Palette.
- Search and choose
stylelint
. - Enable the linter in the VS Code settings, while disabling the built-in CSS and SCSS linter:
{
"stylelint.enable": true,
"css.validate": false,
"scss.validate": false
}
Sublime Text
Use Package Control to install the linter plugin.
- In Sublime Text, bring up the Command Palette and type
install
. SelectPackage Control: Install Package
. - When the list of available packages appears, type
linter
and selectSublimeLinter
. - Repeat step 1 and when the package list appears again, type
stylelint
and selectSublimeLinter-contrib-stylelint
.
Extending the config
If you want to extend or override some of the rules in this configuration, simply add a "rules"
key to your config. See the stylelint rules configuration docs for more details.
For example, to override the rule string-quotes
from double to single and turn off the number-leading-zero
rule:
{
"extends": "stylelint-config-topxel",
"rules": {
"string-quotes": "single",
"number-leading-zero": null
}
}
License
Copyright (c) 2017 Topxel - Licensed under the MIT License.