Hi,
I just recently started to use ST3 (from VSCode). Back in VSCode when I’m editing css (scss) files and when I hover over the style it displays a visual clue on how the class will be applied in the html structure. Is there any similar functionality/package which I can use to get the same feature. Plus it would be nice if there is some quick info feature as well for css(scss) files.
can you include a screenshot of the VSCode functionality please, it could help us identify if Sublime has anything similar
I’m very sorry for the dark arrow, however when I hover over the class it shows a tip on how it will be applied
Thanks for this. I installed LSP and vscode-css-languageserver-bin. I also went to Preferences->Package Settings->LSP->Settings and added the following
"clients": {
"vscode-css": {
"enabled": true,
"command": [
"node",
"C:/Users/a136836/AppData/Roaming/npm/node_modules/vscode-css-languageserver-bin/cssServerMain.js",
"--stdio"
],
"scopes": ["source.css"],
"syntaxes": ["Packages/CSS/CSS.sublime-syntax"],
"languageId": "css"
}
}
Now when I try LSP->Enable Language Server in the command palette I don’t see an option for css.
I think this step might not be required since its already enabled with the values under the “client” section. How do I get the pop up working as shown in my initial screenshot? Plus none of the shortcut keys like ctrl+. seem to be working.
Plus when I try to look at the LSP diagnostics I see nothing.
I think I’m missing a step, would appreciate some help.
works for me:
are you sure that the path to cssServerMain.js is valid ?
add these to your LSP settings file:
"log_debug": true,
"log_stderr": true
open a css file, open the console and see what is logged.
Thanks, after messing around a lot I got it working. I want to do the same for the .scss files. To that end I have the following entry in the settings file
"scss":
{
"command":
[
"node",
"C:/Users/a136836/AppData/Roaming/npm/node_modules/vscode-css-languageserver-bin/cssServerMain.js",
"--stdio"
],
"enabled": true,
"languageId": "scss",
"scopes":
[
"source.scss"
],
"syntaxes":
[
"Packages/CSS/CSS.sublime-syntax"
]
},
However this is not working and again the console is not showing anything. I think its primarily because its not detecting the type properly, the syntax shows it as “scss” but its not running the LSP Server.
Maybe you need to add it’s syntax to the entry, you first need to install the Sass package.
And you don’t need a new entry for sass anyway, just add the scope and syntax on top of your vscode-css settings and make sure the scope is correct (open an scss file and press ctrl+alt+m to show the scope name).
I haven’t tried it yet, but i’ll see later.
These are my configurations:
"vscode-css":
{
"command":
[
"node",
"C:/Users/User/AppData/Roaming/npm/node_modules/vscode-css-languageserver-bin/cssServerMain.js",
"--stdio"
],
"enabled": true,
"languageId": "css",
"scopes":
[
"source.css",
"source.scss",
"source.css.less",
"source.sass"
],
"syntaxes":
[
"Packages/CSS/CSS.sublime-syntax",
"Packages/Sass/Syntaxes/SCSS.sublime-syntax",
"Packages/LESS/LESS.sublime-syntax",
"Packages/Sass/Syntaxes/Sass.sublime-syntax"
]
}
Thanks for this and it seems to work ok, I’m also trying to get this working for .ts files. This is my configuration
"js": {
"command": ["lsp-tsserver"],
"enabled": true,
"languageId": "javascript",
"scopes": ["source.js"],
"syntaxes": ["Packages/JavaScript/JavaScript.sublime-syntax"]
},
"jsts": {
"command": ["lsp-tsserver"],
"enabled": true,
"languageId": "TypeScript",
"scopes": ["source.ts", "source.tsx"],
"syntaxes": [
"Packages/TypeScript-TmLanguage/TypeScript.tmLanguage",
"Packages/TypeScript-TmLanguage/TypeScriptReact.tmLanguage"
]
},
However when I open a .js or .ts file the server does not do anything, (actually I think it starts) however none of the shortcut keys seem to work. I have installed the required packages as well.
.cmd to the command and make sure it’s in you path. "jsls":
{
"command":
[
"lsp-tsserver.cmd"
],
"enabled": true,
"languageId": "javascript",
"scopes":
[
"source.js"
],
"syntaxes":
[
"Packages/JavaScript/JavaScript.sublime-syntax"
]
},
"tsls":
{
"command":
[
"lsp-tsserver.cmd"
],
"enabled": true,
"languageId": "typescript",
"scopes":
[
"source.ts",
"source.tsx"
],
"syntaxes":
[
"Packages/TypeScript Syntax/TypeScript.tmLanguage",
"Packages/TypeScript Syntax/TypeScriptReact.tmLanguage"
]
}
Sometimes the value of languageId determines the processing that language server enables so for CSS/SCSS (vscode-css-languageservice) it might matter which one is passed and thus one might need to create two different client entries for css and scss. I haven’t verified with the source code if it’s actually the case but I had this issue with vue-ls (also made by Microsoft).
Just by quickly scanning the code, there is a code like this: https://github.com/Microsoft/vscode-css-languageservice/blob/47e6f7e4d09de7142f5275658037eda39008b661/src/services/cssFolding.ts#L28 so it seems that the value of languageId deteremines the parser mode that is used. So I wouldn’t recommend creating client configs like the one above.
Hi Everyone,
In order to get scss working I had the following setting
"vscode-scss":
{
"command":
[
"node",
"C:/Users/user/AppData/Roaming/npm/node_modules/vscode-css-languageserver-bin/cssServerMain.js",
"--stdio"
],
"enabled": true,
"languageId": "scss",
"scopes":
[
"source.scss"
],
"syntaxes":
[
"Packages/Syntax Highlighting for Sass/Syntaxes/SCSS.sublime-syntax"
]
}
There was an upgrade to the scss syntax page last night and now the scope shows “source.scss.scss” When I change the setting it still does not work and I see the following error
LSP: no config found or enabled for view "layout.component.scss"
I also installed another package “syntax highlighting for sass” and this initially shows scope name as “source.scss” However I get the same error here as well.
New scope is source.css.scss, not source.scss.scss. Maybe you just made a typo in the comment?