Ok it’s taken me an hour and I’ve now installed SublimeLinter. But it doesn’t do anything.
Do I have to turn it on?
I’ve installed a CSS Linter plugin, but still doesn’t work.
It says something about “configure your PATH” so that SublimeLinter can find it. How do I do that?
SublimeLinter is a package, not a core feature, did you read the trubleshooting of the package? http://www.sublimelinter.com/en/stable/troubleshooting.html
btw, what system are you on? which linter exactly did you tried to install? have you installed also the sublimelinter plugin package for that linter?
I have read the troubleshooting but I’m afraid I don’t understand it.
I’m using Mac. I’ve installed the SublimeLinter and then the CSS lint. I think it was called csslint
The CSS lint came with instructions, on how to install it / link it to SublimeLinter. I didn’t understand the instructions. It said something about Terminal. I don’t know what that is. So I ignored the instructions hoping it would work anyway. But it doesn’t. And now I can’t find the instructions. Nor can I redownload/install the CSS Lint.
Perhaps the easiest thing to do would be to delete SublimeLinter (and hope this deletes the CSS Lint as well) and start again?
Found some info here:
https://packagecontrol.io/packages/SublimeLinter-csslint
Before installing this plugin, ensure that csslint (version 0.10.0 or later) is installed on your system. To install csslint , do the following:
npm install -g csslint
nvm and zsh , ensure that the line to load nvm is in .zshenv and not .zshrc .Please make sure that the path to csslint is available to SublimeLinter. The docs cover troubleshooting PATH configuration.
I don’t understand a single word of that.
Okay,
so I assume you did the first 2 steps (install both sublimelinter and its css plugin).
Now, sublimelinter and quite all its plugins needs the “real” linters to be installed as they are just an interface to run the actual linting process. It seems to me that this is the part where you failed, so let’s try to review it.
First of all you need 2 thing on your machine: Node.js (runtime) and NPM (package manager), so you need to install them following the links provided.
Next step is to install the real Css Linter by typing in you terminal “npm install -g csslint”, after that typing in you terminal “csslint” should return the help screen, and typing “which csslint” should return the path of the executable.
After that you should be done, but you may need to configure the linter (eg. change type of errors/warning s accordingly to your taste), to do that open SublimeLinter’s settings (preferences > packages settings > sublimelinter > settings).
For example this is what I have in sublimelinter settings under “linters”:
"csslint": {
"disable": false,
"args": [],
"errors": "ids,display-property-grouping,duplicate-properties,empty-rules,errors,known-properties,vendor-prefix",
"excludes": [],
"ignore": "",
"warnings": "adjoining-classes,box-model,box-sizing,compatible-vendor,duplicate-background,fallback-colors,floats,font-faces,font-sizes,gradients,import,important,outline-none,overqualified-elements,qualified-headings,regex-selectors,rules-count,shorthand,star-property,text-indent,underscore-property,unique-headings,universal-selector,zero-units"
},
Finally the “Path” part, honestly I never had to fine tune that, 'coz under windows paths are usually working without problems, but if you need to edit that, then, in the sublimelinter setting under “paths” > “osx” you should add the output of the previously ran terminal command “which csslint”.
hope it helps 
What are Node.js and NPM?
Next step is to install the real Css Linter by typing in you terminal
What’s that??
I’m using Sublime 3.2.2 and presumably SublimeLinter 4.0.0.
In the documentation for 4.0.0 there is no mention of having to also install the CSS Linter (the bit I’ve failed at) - so perhaps with the most up to date version I don’t need to do this second step?
I can see in the docs for SublimeLinter 3.4.24 it says there is this second step.
Yippeeeee!
It has taken me all day but I’ve finally got SublimeLinter CSSlint and HTMLlint to work!
It’s been scary. Never used Terminal before!
CSSLint is coming up with loads of error messages, saying my properties are not in alphabetical order. I hadn’t realised they should be. Is there a quick way of making my css properties in alphabetical order? Or stop CSSLint from checking this?
There is no “real needs” to sort props in alphabetical order, is just a matter of linting rules applied, as i mentioned in the config snippet i posted in previews answer you can fine tune the rules to match your needs/tastes, you can simply skip this rule by adding “order-alphabetical” in the ignore prop.
Rules aren’t written on stone, let’s say they are more a sort of guide to follow than the last words of the lord…
Also, there are 2 level of linting, errors and warning, the latter are more trivial and can be left out of code refactoring, while the first are the one that make a stylesheet fall into a deep pit of desperation when you have to fix a bug, like using IDs as selector and then trying to override a style applied to them…
If you want some hints on how to write better styles you can take a look at the readme of a project i made for a quick lesson i took to my colleagues some years ago, just read the point 3 (the others are out of scope): https://github.com/Orlmente/least-css
I have found the following code to ignore alphabetical order:
"linters": {
"csslint": {
"@disable": false,
"args": [],
"errors": "",
"excludes": [],
"ignore": ["order-alphabetical"],
"warnings": ""
},
I have gone to preferences > packages settings > sublimelinter > settings
I’ve copied and pasted this code into the right hand window and then saved it, but it comes up with the following error message:
What am I doing wrong?
Thank you
try copy the whole left pane into the right one, and then modify the latter.
User settings should be a clone of the default one with, of course, user modification.
Hi. I copied the following text into the right hand pane (I haven’t copied the left hand code into the right hand pane):
{
"linters": {
"csslint": {
"@disable": false,
"args": [],
"errors": "",
"excludes": [],
"ignore": ["order-alphabetical"],
"warnings": ""
}
}
}
And it works. I think I was missing some brackets
No, they should generally not be a clone and instead only specify the keys that they want to change.
You did right there, @Markeee.
well, strange then, on my win* machine as soon as you edit them they are cloned from left to right pane…