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.Dismiss alert
@@ -20,6 +26,22 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
20
26
21
27
The configuration now mandates stylelint v13, and additionally enforces [`value-keyword-case`](https://stylelint.io/user-guide/rules/value-keyword-case/).
# 2. Attempt to auto-fix any new issue picked up by Stylelint.
37
+
npm run lint:css -- --fix
38
+
npm run format
39
+
# 3. Check if there are remaining issues
40
+
npm run lint:css
41
+
```
42
+
43
+
If there are remaining issues, consider a gradual approach: whether you want to update the code, or disable the corresponding rules. This can be done either in the Stylelint configuration, or via [`stylelint-disable` configuration comments](https://stylelint.io/user-guide/ignore-code/). Get the rules reporting issues with: `npm run lint:js -- --formatter tap | grep ruleId | cut -d ':' -f 2 | cut -c 2- | sort | uniq`. For projects strapped for time, disabling all new rules listed above may be a reasonable tradeoff.
Then [configure stylelint to use this config](https://stylelint.io/user-guide/configuration/#extends). As a `stylelint.config.js` in the root of your project:
@@ -24,11 +23,72 @@ module.exports = {
24
23
25
24
### Tips
26
25
27
-
- Use Stylelint’s [`--report-needless-disables`](https://stylelint.io/user-guide/node-api/#reportneedlessdisables) flag to ensure you do not use more `stylelint-disable` comments than needed.
26
+
#### Linting setup for ongoing projects
27
+
28
+
Review our [CHANGELOG](https://github.com/torchbox/stylelint-config-torchbox/blob/main/CHANGELOG.md) for guidance on how to upgrade a project’s linting to a specific version.
29
+
30
+
More generally, when retrofitting stricter linting onto an existing project, consider [a gradual approach to linting strictness](https://thib.me/upgrading-to-stricter-eslint-config), so you can start using linting without having to change significant portions of the project’s code. Here is an example, disabling commonly hard-to-retrofit rules:
31
+
32
+
```js
33
+
// Rules which we ideally would want to enforce but are reporting too many issues currently.
34
+
constlegacyRules= {
35
+
'max-nesting-depth':null,
36
+
'selector-max-specificity':null,
37
+
};
38
+
39
+
module.exports= {
40
+
// See https://github.com/torchbox/stylelint-config-torchbox for rules.
41
+
extends:'stylelint-config-torchbox',
42
+
rules: {
43
+
...legacyRules,
44
+
},
45
+
};
46
+
```
47
+
48
+
#### Common CLI flags
49
+
50
+
We recommend the following `run` script to add to your `package.json`:
- Use [`--report-needless-disables`](https://stylelint.io/user-guide/node-api/#reportneedlessdisables) flag to ensure you do not use more `stylelint-disable` comments than needed.
57
+
- Target specific folders so Stylelint doesn’t attempt to lint e.g. JS or HTML files.
58
+
59
+
#### `.stylelintignore`
60
+
61
+
Stylelint supports ignore patterns in a `.stylelintignore` file, however we tend not to use this since we lint all files within a given folder.
62
+
63
+
### Prettier
64
+
65
+
This config is [Prettier](https://prettier.io/)-compatible, there isn’t anything extra needed.
66
+
67
+
### Tailwind
68
+
69
+
This config should work with [Tailwind](https://tailwindcss.com/) with no adjustments needed. Please submit an issue if that’s not the case.
70
+
71
+
### pre-commit
72
+
73
+
Here is a sample setup with our recommended configuration for the [pre-commit](https://pre-commit.com/) pre-commit hook framework:
stylelint supports Vue, and our configuration is usable in `.vue` single-file components with no changes. Do make sure linting is configured to check `.vue` files:
91
+
Stylelint supports Vue, and our configuration is usable in `.vue` single-file components with no changes. Do make sure linting is configured to check `.vue` files:
32
92
33
93
- Wherever `stylelint` is manually invoked, make sure to point it both at stylesheets, and Vue components: `stylelint --report-needless-disables './src/sass' './src/vue_components'`.
34
94
- With [`stylelint-webpack-plugin`](https://webpack.js.org/plugins/stylelint-webpack-plugin/), use `extensions: ['scss', 'vue'],`.
0 commit comments