Violations not reported by stylelint.

Question

Violations not reported by stylelint.

cagross opened this issue 5 years ago · comments

Hello. I have followed the installation instructions, but am having trouble getting stylelint to report violations of the ruleset. Here are the steps I've followed, and the results.

I installed stylelint and confirmed it can report CSS errors (e.g. missing closing curly bracket).
I installed stylelint-config-wordpress. During installation, I added this line to the file shinnn.stylelint-0.51.0/package.json:

"extends": "C:/Users/snarl/.vscode/extensions/stylelint-config-wordpress",
(screenshot).

I opened an existing CSS file, and introduced a violation of a CSS WordPress coding standard (0 values should not have units unless necessary, such as with transition-duration). But no violation was reported by stylelint. Why is that? Am I misunderstanding something?

Thanks.

Stephen Edgar commented 5 years ago

yes

Stephen Edgar · Answer 1 · Mon Sep 30 2019 21:02:08 GMT+0800 (China Standard Time)

I suggest you disable or remove Prettier for now, it overrides some stylelint rules and at the moment its better to debug this issue without Prettier introducing extra complexity to the issue.

extends is not a valid VSCode Stylelint setting, only stylelint.enable, stylelint.configOverrides, and stylelint.config are, see docs here

I think the core of the issue is that you have installed the npm packages "globbaly" using the -g flag, on my computer here, granted it is a Mac when I open a file I get the stylelint warnings displayed without issue and I have no extension settings set, VSCode and the extension detect and load the stylelint config I have installed, which is the .stylelintrc.json file in my repo.

Installing stylelint (or many other similar tools, ESLint etc) globally is troublesome, primarily because if you swap repos, say from Twenty Twenty to Gutenberg the stylelint configurations are different, they are both based on stylelint-config-wordpress but have a few additional tweaks for each repo. Now if you add the stylelint-config-wordpress configuration globbaly then when you open either of those repos you will have conflicting stylelint configurations because you've installed stylelint-config-wordpress globally and the VSCode extension will not be able to know which config to use.

My suggestion is this:

Remove Prettier (for now)
Remove any stylelint settings you added to VS Code's settings.json
Uninstall all the stylelint and stylelint plugins and configs and dependancies or peer dependacies
Reinstall stylelint and stylelint-config-wordpress
npm install stylelint stylelint-config-wordpress
Clone a repo, Gutenberg or Twenty Twenty and open a CSS file to test

Carl Gross · Answer 2 · Mon Sep 30 2019 22:05:03 GMT+0800 (China Standard Time)

@ntwb Hey thanks very much for helping me get this setup.

My suggestion is this:

I'm very happy to try any and all of your suggestions. But before I do so, can you clarify one thing in your Usage section? In it, it instructs:

If you've installed stylelint-config-wordpress locally within your project, just set your stylelint config to:

{
  "extends": "stylelint-config-wordpress"
}

If you've globally installed stylelint-config-wordpress using the -g flag, then you'll need to use the absolute path to stylelint-config-wordpress in your config:

{
  "extends": "/absolute/path/to/stylelint-config-wordpress"
}

Am I correct that at some point, one of these two steps will be necessary? If so, which specific file do I need to edit as part of that step? Or is this step not necessary? I ask because for me it was a bit difficult to figure out which file to edit (I eventually edited shinnn.stylelint-0.51.0/package.json).
But I also noticed that in the instructions you just listed, this step was not present.

If you can clarify that, then I'm definitely happy to give everything a reboot and try again with the local installation steps.

Remove any stylelint settings you added to VS Code's settings.json

I actually have already removed any settings added to VS Code's settings.json. Last week, I had indeed (erroneously) added a line to settings.json. But I have since realized that was incorrect, and removed that code.

I suggest you disable or remove Prettier for now

I actually already have Prettier disabled--it has been for the duration of my testing in this case.

Stephen Edgar · Answer 3 · Wed Oct 02 2019 09:11:07 GMT+0800 (China Standard Time)

Am I correct that at some point, one of these two steps will be necessary?

Correct

What terminal shell are you using? PowerShell? cmd.exe, WSL?

Also you should test this by cloning either the Gutenberg or Twenty Twenty repo, as they have valid stylelint setups that should not involve any configuration on your part, they should simply just work in VS Code

Carl Gross · Answer 4 · Wed Oct 02 2019 20:28:45 GMT+0800 (China Standard Time)

Am I correct that at some point, one of these two steps will be necessary?
Correct

OK. Just so I'm clear though, you accidentally left that out of the instructions you posted in this thread 2 days ago--is that correct? Sorry to harp on that, but since the start, for me, this has been the step that has been least clear.

And most importantly, in what file do I add this extends line?

What terminal shell are you using? PowerShell? cmd.exe, WSL?

I am using Git Bash for Windows.

Also you should test this by cloning either the Gutenberg or Twenty Twenty repo, as they have valid stylelint setups that should not involve any configuration on your part, they should simply just work in VS Code

OK I can do this, but can you clarify what you mean by 'cloning the Gutenberg or Twenty Twenty repo?` Are you saying I should clone the Twenty Twenty repo to my computer, then, in VSCode, open one of its CSS files on my local computer?

Stephen Edgar · Answer 5 · Thu Oct 03 2019 08:41:48 GMT+0800 (China Standard Time)

OK. Just so I'm clear though, you accidentally left that out of the instructions you posted in this thread 2 days ago--is that correct? Sorry to harp on that, but since the start, for me, this has been the step that has been least clear.

And most importantly, in what file do I add this extends line?

You would add this to your own projects stylelint config file, but for now I suggest you forget about doing this, just clone one of the repos suggested and try it per below

OK I can do this, but can you clarify what you mean by 'cloning the Gutenberg or Twenty Twenty repo?` Are you saying I should clone the Twenty Twenty repo to my computer, then, in VSCode, open one of its CSS files on my local computer?

Yes

Carl Gross · Answer 6 · Thu Oct 03 2019 23:45:18 GMT+0800 (China Standard Time)

OK got it. I'll try to see through the instructions you posted a few days ago. But let me get clarification on a few:

Uninstall all the stylelint and stylelint plugins and configs and dependancies or peer dependacies

Uninstalling stylelint can be done from inside VSCode, simply by opening Extensions, clicking stylelint, then clicking the 'Uninstall' button. Correct?

How do I uninstall stylelint-config-wordpress? Can I simply delete that folder from /.vscode/extensions?

Uninstall all the stylelint and stylelint plugins and configs and dependancies or peer dependacies

How can I determine if I have any configs, dependencies, or peer dependencies to uninstall?

Reinstall stylelint and stylelint-config-wordpress

To be clear, should I install each globally, or locally? I think I prefer to install globally. But if we need to install locally to get this working, I can try that.

npm install stylelint stylelint-config-wordpress

What exactly is this step accomplishing? I don't recall ever taking that step during my initial setup.

Thanks.

Stephen Edgar · Answer 7 · Fri Oct 04 2019 06:47:28 GMT+0800 (China Standard Time)

Uninstalling stylelint can be done from inside VSCode, simply by opening Extensions, clicking stylelint, then clicking the 'Uninstall' button. Correct?

No, that would uninstall the stylelint VS Code extension, you want to keep that installed in VS Code

How do I uninstall stylelint-config-wordpress? Can I simply delete that folder from /.vscode/extensions?

Yes

How can I determine if I have any configs, dependencies, or peer dependencies to uninstall?

Per the above, remove any of those manual copies you performed copying the folders to the /.vscode/extensions folder.

To be clear, should I install each globally, or locally? I think I prefer to install globally. But if we need to install locally to get this working, I can try that.

Don't install any, ensure the /.vscode/extensions folder doesn't have any stylelint-config-wordpress config folders at all, it requires stylelint so leave it there.

To ensure you don't have stylelint packages installed globally run this npm uninstall -g stylelint stylelint-config-wordpress

What exactly is this step accomplishing? I don't recall ever taking that step during my initial setup.

This is only required when you need to add the packages to your own project you have created, e.g if you create a new theme etc

To test all of the above you should checkout Twenty Twenty theme:

Open a terminal and go to the folder whereever you keep your code:

cd code:

Clone Twenty Twenty:

git clone https://github.com/WordPress/twentytwenty.git

Change into the folder of the checkout:

cd twentytwenty

Setup the repo and install its dependancies:

npm install

Open VS Code and open the twentytwenty folder and test by opening style.css and making some changes to see if it works.

Carl Gross · Answer 8 · Sat Oct 05 2019 00:44:50 GMT+0800 (China Standard Time)

OK thanks for confirming all those. Now we're getting somewhere--I carried out every step and each completed without issue. I then opened one of the CSS files in the twentytwenty folder, made a change that should violate one of the WordPress coding standard rules, and bringo, it was flagged by stylelint (screenshot). Great.

So in light of that, how can I get my CSS files to be linted in that manner?

Stephen Edgar · Answer 9 · Sat Oct 05 2019 09:51:22 GMT+0800 (China Standard Time)

Awesome 🎉

What CSS do you want to lint? Is it a project of yours?

Is it a Git repo? Does it already have a package.json file?

Carl Gross · Answer 10 · Sat Oct 05 2019 18:19:53 GMT+0800 (China Standard Time)

What CSS do you want to lint? Is it a project of yours?
Is it a Git repo? Does it already have a package.json file?

OK good questions. Let me try to explain clearly.

The vast majority of the CSS files I open in VSCode are one off files--not part of any project saved on my computer. That is, I connect to a web server via FTP, copy the CSS file to a temporary directory on my local computer, open the CSS file in VSCode, make my edits, save the file, and re-upload it back to the web server. The temporary directory on my local computer is not version controlled--there are no Git repos involved at all during this process. I believe the temporary directory may even be destroyed after file re-upload--I'd have to check on that.

Additionally:

I occasionally build a complete website on my local computer, without any FTP. These websites have one or more CSS files, and I occasionally open those files in VSCode and edit them. Nearly all of these websites are in Git repos on my local computer (and synced to a remote repo on GitHub). None of these have an existing package.json file--at least, if they do, I did not explicitly add it (i.e. it may be from another package/plugin I have added to the website).
I very rarely open entire folders in VSCode. Although I have one local project in which I occasionally open the entire folder in VSCode (that project is indeed in a Git Repo.
I think one of the existing projects on my local computer has an existing package.json file that I explicitly installed. But it is not a project I work on frequently--zero hours over the past month or so :-/ But I plan to get back on it. This project is indeed in a Git repo.

So in light of that, what do you think?

Stephen Edgar · Answer 11 · Sat Oct 05 2019 18:38:37 GMT+0800 (China Standard Time)

Thanks, this helps determine to the best way to add a config as you are for the most part not using npm and git repos to install their dependencies.

You should set the config in the VS Code extension with stylelint.config per the extensions docs at https://marketplace.visualstudio.com/items?itemName=shinnn.stylelint

What you want to add is this:

Save this, its the stylelint-config-wordpress config file, then add the following with the path to where you saved the file:

"stylelint.config": {
  "extends": "/absolute/path/to/your/conf/index.js"
}
"stylelint.enable": true

You should now be able to edit any file you open or create, I hope 🤞🏼

Carl Gross · Answer 12 · Sat Oct 05 2019 18:53:34 GMT+0800 (China Standard Time)

OK I have some questions.

Save this, its the stylelint-config-wordpress config file

This is the first step I should take, correct? If so, I have indeed saved that file locally, to D:/temp/index.js.

then add the following with the path to where you saved the file:

"stylelint.config": {
  "extends": "D:/temp/index.js"
}
"stylelint.enable": true

OK I understand I should add this code snippet to a certain file. But which file? Do I add it to D:/temp/index.js? That doesn't sound right--I'd be referencing D:/temp/index.js inside D:/temp/index.js. If I need to add this code to another file, are you able to tell me the exact path and file name? Is it package.json in the stylelint folder? Hand holding would be appreciated on this step, if possible :-)

Also, after I understand which specific file takes this code: do I need to add the code to any particular section of the file?

We're nearly there!

Stephen Edgar · Answer 13 · Sun Oct 06 2019 00:14:24 GMT+0800 (China Standard Time)

Apologies, add that to the VS Code settings.json file, you should be able to open that file by pressing CTRL+, (Control Comma)

Carl Gross · Answer 14 · Sun Oct 06 2019 01:25:04 GMT+0800 (China Standard Time)

OK here's what I did, and the results:

I saved index.js to C:/Users/snarl/.vscode/extensions/index.js.
I inserted that path into the code snippet you mentioned, and inserted that code snippet into the file C:\Users\snarl\AppData\Roaming\Code\User\settings.json (screenshot). I ascertained that directory via these VSCode instructions.
I opened one of my style.css files in VSCode.

In the bottom right, VSCode displayed an error:

stylelint: Could not find "stylelint-config-recommended". Do you need a configBasedir?

(screenshot) Thoughts?

I should say that when I first added the code snippet to settings.json, I accidentally included a typo on the path. When I in-turn opened my CSS file in VSCode, it displayed a different error message, indicating it could not find anything at that path. So at least that confirms the code snippet I added to settings.json is being read in some capacity.

Stephen Edgar · Answer 15 · Sun Oct 06 2019 11:17:48 GMT+0800 (China Standard Time)

Oh, so close, that's working perfectly, shame I didn't take that into account ;)

The index.js file you save also depends on stylelint-config-recommended

Which leads us to the same problem of having to install/hack those configs

Instead what I documented previously add this to your VS Code settings.json file replacing what you already had:

The below is the rules merged from both stylelint-config-wordpress and stylelint-config-recommended

  "css.validate": false,
  "stylelint.config": {
    "rules": {
      "at-rule-empty-line-before": [ "always", {
        "except": ["blockless-after-blockless"],
        "ignore": ["after-comment"],
      } ],
      "at-rule-name-case": "lower",
      "at-rule-name-space-after": "always-single-line",
      "at-rule-no-unknown": true,
      "at-rule-semicolon-newline-after": "always",
      "block-closing-brace-newline-after": "always",
      "block-closing-brace-newline-before": "always",
      "block-no-empty": true,
      "block-opening-brace-newline-after": "always",
      "block-opening-brace-space-before": "always",
      "color-hex-case": "lower",
      "color-hex-length": "short",
      "color-named": "never",
      "color-no-invalid-hex": true,
      "comment-empty-line-before": [ "always", {
        "ignore": ["stylelint-commands"],
      } ],
      "comment-no-empty": true,
      "declaration-bang-space-after": "never",
      "declaration-bang-space-before": "always",
      "declaration-block-no-duplicate-properties": [
        true,
        {
          "ignore": ["consecutive-duplicates-with-different-values"]
        }
      ],
      "declaration-block-no-shorthand-property-overrides": true,
      "declaration-block-semicolon-newline-after": "always",
      "declaration-block-semicolon-space-before": "never",
      "declaration-block-trailing-semicolon": "always",
      "declaration-colon-newline-after": "always-multi-line",
      "declaration-colon-space-after": "always-single-line",
      "declaration-colon-space-before": "never",
      "declaration-property-unit-whitelist": {
        "line-height": ["px"],
      },
      "font-family-name-quotes": "always-where-recommended",
      "font-weight-notation": [ "numeric", {
        "ignore": ["relative"],
      } ],
      "function-calc-no-invalid": true,
      "function-calc-no-unspaced-operator": true,
      "function-comma-space-after": "always",
      "function-comma-space-before": "never",
      "function-linear-gradient-no-nonstandard-direction": true,
      "font-family-no-duplicate-names": true,
      "font-family-no-missing-generic-family-keyword": true,
      "function-max-empty-lines": 1,
      "function-name-case": [ "lower", {
        "ignoreFunctions": ["/^DXImageTransform.Microsoft.*$/"],
      } ],
      "function-parentheses-space-inside": "never",
      "function-url-quotes": "never",
      "function-whitespace-after": "always",
      "indentation": "tab",
      "keyframe-declaration-no-important": true,
      "length-zero-no-unit": true,
      "max-empty-lines": 2,
      "max-line-length": [ 80, {
        "ignore": "non-comments",
        "ignorePattern": ["/(https?://[0-9,a-z]*.*)|(^description\\:.+)|(^tags\\:.+)/i"],
      } ],
      "media-feature-colon-space-after": "always",
      "media-feature-colon-space-before": "never",
      "media-feature-name-no-unknown": true,
      "media-feature-range-operator-space-after": "always",
      "media-feature-range-operator-space-before": "always",
      "media-query-list-comma-newline-after": "always-multi-line",
      "media-query-list-comma-space-after": "always-single-line",
      "media-query-list-comma-space-before": "never",
      "no-descending-specificity": true,
      "no-duplicate-at-import-rules": true,
      "no-duplicate-selectors": true,
      "no-empty-source": true,
      "no-eol-whitespace": true,
      "no-extra-semicolons": true,
      "no-invalid-double-slash-comments": true,
      "no-missing-end-of-source-newline": true,
      "number-leading-zero": "always",
      "number-no-trailing-zeros": true,
      "property-case": "lower",
      "property-no-unknown": true,
      "rule-empty-line-before": [ "always", {
        "ignore": ["after-comment"],
      } ],
      "selector-attribute-brackets-space-inside": "never",
      "selector-attribute-operator-space-after": "never",
      "selector-attribute-operator-space-before": "never",
      "selector-attribute-quotes": "always",
      "selector-class-pattern": [
        "^[a-z]+(-[a-z]+)*",
        {
          "message": "Selector should use lowercase and separate words with hyphens (selector-class-pattern)",
        },
      ],
      "selector-id-pattern": [
        "^[a-z]+(-[a-z]+)*",
        {
          "message": "Selector should use lowercase and separate words with hyphens (selector-id-pattern)",
        },
      ],
      "selector-combinator-space-after": "always",
      "selector-combinator-space-before": "always",
      "selector-list-comma-newline-after": "always",
      "selector-list-comma-space-before": "never",
      "selector-max-empty-lines": 0,
      "selector-pseudo-class-case": "lower",
      "selector-pseudo-class-no-unknown": true,
      "selector-pseudo-class-parentheses-space-inside": "never",
      "selector-pseudo-element-case": "lower",
      "selector-pseudo-element-colon-notation": "double",
      "selector-pseudo-element-no-unknown": true,
      "selector-type-case": "lower",
      "selector-type-no-unknown": true,
      "string-no-newline": true,
      "string-quotes": "double",
      "unit-case": "lower",
      "value-keyword-case": "lower",
      "unit-no-unknown": true,
      "value-list-comma-newline-after": "always-multi-line",
      "value-list-comma-space-after": "always-single-line",
      "value-list-comma-space-before": "never",
    }
  },
  "stylelint.enable": true

The above is working in my (new) Windows VS Code stylelint setup :)

Carl Gross · Answer 16 · Sun Oct 06 2019 13:41:52 GMT+0800 (China Standard Time)

OK thanks for that. I followed those new steps, opened a CSS file in VSCode, and boom--everything is working as expected now. Well done--thanks!

So, I now I have a few follow-up questions.

In this last step, we seemed to manually add all the new rules to VSCode settings.json. Why exactly is that step necessary?

I'm a little surprised this issue hasn't been raised--and resolved--in the past. Is the way I edit CSS files so non-standard that no one else has ever had these issues? Or did something recently change which in-turn has led to these issues?

Are there any potential issues with this workaround solution (i.e. in which I manually added all the rules to VSCode settings.json)? For example, is it stable for the future? In other words, if there is an update to the ruleset, or some other update, how will I update my system? I know rules don't change very often, but I'm just curious, if they did, how I would update.

If there are potential issues with this workaround solution, is there perhaps a better way for me to do things on my end, so this workaround is not necessary? For example, what if I ensured all CSS files on my computer were in one specific folder before opening them? Could I then setup my system so this workaround solution is not necessary?

Or, earlier you mentioned, "The index.js file you save also depends on stylelint-config-recommended." Is there perhaps a way to ensure index.js automatically loads stylelint-config.recommended? If so, might that eliminate the need for the workaround? Just thinking out loud on that one.

Stephen Edgar · Answer 17 · Sun Oct 06 2019 14:50:03 GMT+0800 (China Standard Time)

OK thanks for that. I followed those new steps, opened a CSS file in VSCode, and boom--everything is working as expected now. Well done--thanks!

Awesome

In this last step, we seemed to manually add all the new rules to VSCode settings.json. Why exactly is that step necessary?

Most users would use stylelint in a version-controlled setup, thus Git and npm would have this configured.

I'm a little surprised this issue hasn't been raised--and resolved--in the past. Is the way I edit CSS files so non-standard that no one else has ever had these issues? Or did something recently change which in-turn has led to these issues?

I’m sure it has, I’ve just not seen it

Are there any potential issues with this workaround solution (i.e. in which I manually added all the rules to VSCode settings.json)? For example, is it stable for the future? In other words, if there is an update to the ruleset, or some other update, how will I update my system? I know rules don't change very often, but I'm just curious, if they did, how I would update.

You can keep an eye on the releases of this project, when a new release is released the CHANGELOG.md file will document any rule changes, additions or removals. WIth that info you’ll be able to update your settings as required.

If there are potential issues with this workaround solution, is there perhaps a better way for me to do things on my end, so this workaround is not necessary? For example, what if I ensured all CSS files on my computer were in one specific folder before opening them? Could I then setup my system so this workaround solution is not necessary?

I’d suggest you do do this, setting up a folder to save these files in, you don’t have to use Git and version control everything, but in time it may be worth doing so when you make changes to your settings you’ll have a history of those changes, so reading up some on Git and some experience will help you here.

To use npm, you need to install Node.js, this will give you access to npm.

To setup a folder to do this, something like this would be how I’d start:

Create a folder
CD into it
Run npm init
That will run through a wizard asking a few questions, you can ignore them all and accept the defaults
This gives you a package.json file
Then run npm install stylelint-config-wordpress —save-dev
Remove all the stylelint configs and settings you added to VS Code
Open a CSS file and it should work

Or, earlier you mentioned, "The index.js file you save also depends on stylelint-config-recommended." Is there perhaps a way to ensure index.js automatically loads stylelint-config.recommended? If so, might that eliminate the need for the workaround? Just thinking out loud on that one.

Essentially you’d also save the JS file from stylelint-config-recommend and edit to stylelint-config-wordpress file and update the extends section to point to that saved file

Carl Gross · Answer 18 · Sun Oct 06 2019 17:39:17 GMT+0800 (China Standard Time)

OK thanks for that. I actually already have node.js installed on my machine. I gave your instructions a try. I created a new folder (C:\Users\snarl\testy)was able to run npm init and create the package.json file inside. But when I ran npm install stylelint-config-wordpress —save-dev it returned:

npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN stylelint-config-wordpress@15.0.0 requires a peer of stylelint@^10.1.0 || ^11.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN stylelint-config-recommended@3.0.0 requires a peer of stylelint@>=10.1.0 but none is installed. You must install peer dependencies yourself.
npm WARN stylelint-scss@3.11.1 requires a peer of stylelint@^8.0.0 || ^9.0.0 || ^10.0.0 || ^11.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN stylelint-config-recommended-scss@4.0.0 requires a peer of stylelint@^10.1.0 || ^11.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN testy@1.0.0 No description
npm WARN testy@1.0.0 No repository field.

+ stylelint-config-wordpress@15.0.0
added 12 packages from 13 contributors and audited 13 packages in 5.692s
found 0 vulnerabilities

When we last resolved this issue, the solution was to move these three folders:

stylelint-config-recommended
stylelint-config-recommended-scss
stylelint-scss

out of /node_modules/ and into .vscode\extensions Is that required here as well? Or do I have to instead install stylelint in this particular folder? Or is something else required here?

Stephen Edgar · Answer 19 · Sun Oct 06 2019 19:26:47 GMT+0800 (China Standard Time)

out of /node_modules/ and into .vscode\extensions Is that required here as well? Or do I have to instead install stylelint in this particular folder? Or is something else required here?

No nothing else should be required here, you can ignore those warnings.

You should be able to open a CSS file that is in your C:\Users\snarl\testy folder and it should work as expected.

Carl Gross · Answer 20 · Mon Oct 07 2019 15:19:34 GMT+0800 (China Standard Time)

OK I see, thanks. In light of that, I carried out the final steps of your instructions:

Remove all the stylelint configs and settings you added to VS Code

I completed this without issue.

Open a CSS file and it should work

I opened the same CSS file in the testy folder. There were no stylelint WordPress errors reported by VSCode :-/ (earlier, the same file indicated 59 such errors; screenshot comparison). Thoughts on that? VSCode doesn't seem to report any errors when I open it.

Stephen Edgar · Answer 21 · Mon Oct 07 2019 16:47:25 GMT+0800 (China Standard Time)

Can you paste the code in your package.json file please

Carl Gross · Answer 22 · Mon Oct 07 2019 16:56:52 GMT+0800 (China Standard Time)

OK you can see it below:

{
  "name": "testy",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "stylelint-config-wordpress": "^15.0.0"
  }
}

Stephen Edgar · Answer 23 · Mon Oct 07 2019 17:11:59 GMT+0800 (China Standard Time)

Thanks, can try adding stylelint by running npm install stylelint --save-dev

Carl Gross · Answer 24 · Mon Oct 07 2019 17:14:03 GMT+0800 (China Standard Time)

OK I'll try that. But to confirm, I should navigate to the testy directory, then run npm install stylelint --save-dev Is that correct?

Carl Gross · Answer 25 · Mon Oct 07 2019 21:43:10 GMT+0800 (China Standard Time)

OK I gave it a try, but still the same issue. Here is my package.json:

{
  "name": "testy",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "stylelint": "^11.0.0",
    "stylelint-config-wordpress": "^15.0.0"
  }
}

Also, here was the output from npm install stylelint --save-dev

npm WARN testy@1.0.0 No description
npm WARN testy@1.0.0 No repository field.

+ stylelint@11.0.0
added 377 packages from 250 contributors and audited 1587 packages in 35.471s
found 0 vulnerabilities

Stephen Edgar · Answer 26 · Tue Oct 08 2019 08:54:56 GMT+0800 (China Standard Time)

Oh, facepalm on my behalf, again, you need a configuration file in that same folder, it create new file named .stylelintrc.json and post add the following to that file:

{
  "extends": "stylelint-config-wordpress"
}

Via https://github.com/WordPress-Coding-Standards/stylelint-config-wordpress#usage

Carl Gross · Answer 27 · Sat Oct 12 2019 15:46:28 GMT+0800 (China Standard Time)

@ntwb Sorry for the late reply. OK I added that file, and it indeed resolved the issue--CSS files in that folder are now being linted as expected. Thanks for that!

In light of that, I have a couple more wrap-up questions:

With this new solution, how do I properly keep the ruleset up to date? That is, if the rules in stylelint-config-wordpress change, or anything about it changes, how will those changes be applied to my project? I believe I have to take active steps to do that--correct? If so, what are those steps?
In this exercise, I created one single folder on my local computer to house CSS files that I can open for linting. Can I repeat this process, and create multiple folders on my local computer in which I can open CSS files for linting? For example, I have a few projects on my local computer, located in different directories. I may want to repeat this process for each of those directories, and ensure the CSS files within can be linted with this ruleset.

Thanks.