Sublime Forum

Paths to CSS and HTML lint

#1

I have installed the CSS Linter and it is working fine. I had to add the “path” in SublimeLinter’s settings. I have now installed HTML Lint. How do I also add this to the SublimeLinter’s settings? I’ve tried the following and it doesn’t work:

// SublimeLinter Settings - User
{

  // Provide extra paths to be searched when locating system executables.
    "paths": {
        "linux": [],
        "osx": [
        	"/usr/local/bin/csslint"
        ],
        "windows": []
    },

    "paths": {
        "linux": [],
        "osx": [
            "/usr/local/bin/htmllint"
        ],
        "windows": []
    },



        "linters": {
        "csslint": {
            "@disable": false,
            "args": [],
            "errors": "",
            "excludes": [],
            "ignore": ["order-alphabetical"],
            "warnings": ""
        }
    }
}

Nor did this work:

// SublimeLinter Settings - User
{

  // Provide extra paths to be searched when locating system executables.
    "paths": {
        "linux": [],
        "osx": [
        	"/usr/local/bin/csslint",
            "/usr/local/bin/htmllint"
        ],
        "windows": []
    },





        "linters": {
        "csslint": {
            "@disable": false,
            "args": [],
            "errors": "",
            "excludes": [],
            "ignore": ["order-alphabetical"],
            "warnings": ""
        }
    }
}
0 Likes

#2

I’d suggest LSP together with LSP-html and LSP-css as it works out of the box without any configuration needed.

0 Likes

#3

Sounds interesting. So does LSP-html and LSP-css do the same as html-lint and and css-lint – check for errors in my code?

Do I install the LSP package first and then the LSP-html and LSP-css packages?
Do I need node.js?
Do I need to mess about with paths?
What does LSP stand for?

I’m surprised that Sublime doesn’t come pre-installed with the ability to check/validate/lint html and css code.

0 Likes

#4

LSP = Language Server Protocol

That’s the thing which drives all the code intellisense stuff in VS Code. It’s a JSON-RPC based protocol.

The ST package named LSP is a general purpose client for that protocol to enable ST to talk to all kinds of language servers, which VS Code also uses.

The LSP-xyz packages are plugins for the main LSP with the main goal to make your life easier by not needing to mess with installations or configurations to get things working.

As most VS Code plugins are written in TypeScript/JavaScript node.js is needed as runtime for the language servers. Some others like LSP-lemminx require Java. etc.

The way to go is:

  1. ensure node.js is available/installed
  2. Install LSP package
  3. Install LSP-html and/or LSP-css

If node.js is registered to $path you don’t need to mess with paths. LSP-html and LSP-css automatically invoke npm to install the language servers. Works out of the box without any configuration needed.

2 Likes

#5

Sounds great. Thanks

Just to check LSP-html is a HTML linter? and LSP-css is a CSS linter?

0 Likes

#6

They are helper packages, which install the language servers needed to drive code intellisense features. Those include linting, context sensitive auto-completions and things like goto definition or code formatting - all the things language servers do.

Note: You’d probably want to manually bind F12 key to lsp_symbol_definition to let a language server take you to definitions.

0 Likes

#7

Those include linting, context sensitive auto-completions

Linting - good
Context sensitive auto-completions - will that conflict with the built in Sublime auto-completions?

Note: You’d probably want to manually bind F12 key to lsp_symbol_definition to let a language server take you to definitions.

What does ‘definitions’ mean?

It’s taken me two days, but I’ve now got CSSLint and HTMLhint installed and they seem to work fine. If I also install this LPS stuff will it conflict? Will I end up with two things trying to do linting and it ends up messing stuff up? Should I un-install the CSSLint and HTMLhint first?

0 Likes

#8

You might probably want to set "disable_default_completions": false, in HTML.sublime-settings and CSS.sublime-settings to avoid duplicated completion entries, yes.

If you don’t know what it means, you probably don’t need it.

LSP + LSP-html + LSP-css would have taken 5-10 minutes

Yes, it would.

Generally speaking, if you use LSP SublimeLinter is somewhat obsolete as linting is one of several tasks a language server is made for.

0 Likes

#9

Okay. I might give it a go. (I’m just a hesitant because it’s taken me so long to get here)

and

set "disable_default_completions": false, in HTML.sublime-settings and CSS.sublime-settings to avoid duplicated completion entries

sounds like another day of my time!

I like Sublime, but wow is it complicated

0 Likes

#10

Just run “Preferenses: Settings - Syntax Specific” while a CSS file is open and paste the setting.

Note: needs to be "disable_default_completions": true to actually disable the defaults.

Packages like LSP and its helpers try to solve this issue, but as most packages are just some hacker tools made from (and maybe for hackers), most things need some time to get used to.

0 Likes

#11

Hi. I’ve read through the features of LSP and apart from the ‘Diagnostic’ / Linting I don’t think I need any of it. I only write HTML and CSS. As I have SublimeLinter set up I’m happy with my setup.

But thank you for all your help and recommendations

0 Likes