Create SLDS Linter to check for deprecated class names about salesforcedx-vscode HOT 7 CLOSED

@ayeshakmaz - Couple of quick questions:

Functionality

• Since you are not just detecting deprecated but also offering to fix it, what happens for external customers who are using SLDS through a static resource? Per my understanding, they need to pick a particular version of it. What if they are still on the older version of it. If your tool were to make suggestions, it would break since they don't have the new CSS as as static resource yet?
• What files will you scan? Dedicated .css files or also inline CSS?

Implementation

• How are you planning to implement this? The Complex Commands API? Might it be worthwhile to use vscode-css as a basis?

from salesforcedx-vscode.

@vazexqi

Functionality:

• Ideally, if we detect that an older version of the static SLDS is being used, we won't run the extension. The tooltip will also only suggest the new class name and mention what minimum release it applies to.
• We're actually scanning the .html/.cmp files, not CSS (css scanning will be coming later). We first want to detect if they're using the correct html markup/class names

Implementation:

• I'm planning to implement this as a language server, similar to this tutorial, unless you have a better suggestion. The vscode-css will be super useful for the next piece of the extension

from salesforcedx-vscode.

@ayeshakmaz - Thanks for the clarification. I am assuming that this is your first time writing a language server for VS Code? In that case, the tutorial you have chosen is a good way to start. Let's go with that route and when you have something that runs, ping me and I will take a closer look. The learning experience will be useful.

Eventually, we would need to hook this into the existing HTML server. Scaning a HTML page is going to be more tricky (not undoable, but will be more tricky) since HTML pages have several regions of different languages: HTML, JavaScript and CSS. So, when we eventually hook into the HTML page, we would need to make sure that your CSS scanner only runs in the CSS regions.

Taking a look at how an extension has done this for Vue might be useful. See Vuetur, in particular the presentation.

from salesforcedx-vscode.

@vazexqi I've created a prototype with that tutorial that you can see here Very simple, only works on .html or .txt files

I hooked up a basic console.log extension into the current Lightning package in this repo and got it running when you open any of the aliased HTML pages. We can worry about the CSS later, but it might be helpful to pair briefly to get a quick intro into how the current HTML server hooks into the rest of the extension. I was planning to copy the vscode-apex language server as a template and go from there. Does that seem like a good approach?

from salesforcedx-vscode.

@ayeshakmaz I don't seem to have access to the link. Could you add me to the repo?

from salesforcedx-vscode.

@vazexqi Sorry about that, added you

from salesforcedx-vscode.

Closed via #101.

from salesforcedx-vscode.