I want to use the css linter "stylelint" on my VScode text editor.
I downloaded the plugin and install it, then I make the "css.validate": false. But i don't have any box that show me error on my CSS files. What can I do ?
If you're getting started with stylelint for the first time, there are two key steps to enable it in Visual Studio Code:
turn off Visual Studio Code's built-in CSS linter and turn on the stylelint extension
create a stylelint configuration object and turn on some rules
You can complete the first step by following the extension usage instructions, mainly changing your Visual Studio Code settings to:
{
"stylelint.enable": true,
"css.validate": false,
"scss.validate": false
}
And the second step by following the configuration documentation on the stylelint website. I believe the quickest means to get started is:
install the recommended config into your project using npm:
npm install --save-dev stylelint-config-recommended
Create a .stylelintrc file that extends the recommended config in the root of your project:
{ "extends": "stylelint-config-recommended" }
This config turns on just the possible error rules. It is a sensible config to start with and build upon. There are over 150 rules built-in to stylelint. You can choose to turn on and configure as many, or as few, as you like to meet your linting needs.
For anyone seeing this and trying to lint other file extensions; note that by default, the extension validates only CSS and PostCSS files.
In order to validate file extensions such as SCSS, you would need to explicitly state so in .vscode\settings.json:
{
"css.validate": false,
"less.validate": false,
"scss.validate": false,
"stylelint.enable": true,
"stylelint.validate": ["css", "scss"]
}
Related
I'm using VSCode. After the last update of the IDE, I see this error (Even if I didn't open any project to work on).
I googled it, and I tried several actions according to this link:
https://github.com/microsoft/TypeScript/issues/43838
but none of them seems to work.
Anyone faced the issue? (I'm not using TypeScript in any of my projects and I don't have any tsconfig.ts file). Is it related to one of my VSCode extensions?
It is a general update problem about visual-studio-code with the last update. Issue can be followed from here: https://github.com/microsoft/vscode/issues/168420
Installing JavaScript and TypeScript Nightly extension is helpful for me.
Configure .eslintrc.json in your folder again and reload the vs code
example:
.eslintrc.json file for salesforce
Or
you can refer below link to config your eslint file
https://eslint.org/docs/latest/user-guide/configuring/
A few times in vscode extension development vscode has automatically added information to the extension's package.json that obviously seems related to development and debugging that extension.
Note: that the Marketplace Released version of the extension is also installed in the same workspaces used for debugging in the extensionHost. Could that be the issue?
The following fields were automatically added to the extension's package.json:
"identifier": {
"value": "ArturoDent.find-and-transform",
"_lower": "arturodent.find-and-transform"
},
"isBuiltin": false,
"isUserBuiltin": false,
"isUnderDevelopment": true,
"extensionLocation": {
"$mid": 1,
"fsPath": "c:\\Users\\Mark\\find-and-transform",
"_sep": 1,
"external": "file:///c%3A/Users/Mark/find-and-transform",
"path": "/c:/Users/Mark/find-and-transform",
"scheme": "file"
},
"targetPlatform": "undefined",
I missed looking for these changes and published the extension to the Marketplace and it understandably causes problems for users. The extension never loads for example, probably looking in that location from my development machine.
I do a lot of extension development and have only seen this info automatically added a few times.
Is there a way to prevent that info from being added? Or change my workflow so it doesn't happen again?
A closely related issue was reported at vscode extension test run modifies package.json after 1.67.0, where extra metdata was being written to package.json without warning and causing all kinds of problems.
The current SO question above here had nothing to do with running tests (as in the github issue) but only with debugging and was quite sporadic and difficult to make recur - but the same metadata was being written to package.json.
I have filed a new issue on this: Extraneous data written to package.json while debugging an extension that writes to package.json
I have copied the following question from the Elm Slack channel for posterity.
I am having trouble getting the Elm VSCode plugin to format on save. I have set the absolute path to my global install of elm-format in settings.json. I have also set format on save for elm:
"[elm]": {
"editor.formatOnSave": true,
},
I am on an Ubuntu machine, and format does not happen on save or with Ctrl-Shift-I. Does anyone see something that I might be missing?
Install elm-format
Install the extension Elm Language Support for VSCode, which includes syntax and error highlighting
Configure VS code settings.json:
"[elm]": {
"editor.formatOnSave": true
},
The format on save timeout should not be an issue with VSCode 1.42 (Q1 2020)
See "Better handling of slow save operations":
VS Code allows extensions to change a file's contents when saving files to disk.
Features like Format on Save and Fix on Save are examples.
However, saving is a critical operation and extensions doing processing during a save must finish quickly so that the actual save operation can proceed.
"Quickly" used to be enforced by VS Code with timeouts that would make VS Code cancel extension save participation.
That enforcement guaranteed speedy saving but could be frustrating because sometimes expected processing would not happen.
With this release, we have given up the timeout-based approach and instead show a progress notification that allows you to cancel extensions participating in save ("Save Participants").
The notification lets you know that save operations are running and you can decide if you want to wait for a save participant to finish or not.
The following are the responses and resolution.
Response from #stoft:
Try installing elm-format locally or globally with npm, that helped me on MacOS.
Response from #razzee:
please check two things:
are you on the latest elm-format version
increase the formatting timeout of vscode, unfortunately elm-format is sometimes too slow "editor.formatOnSaveTimeout" is what the setting is called"
A global install of the latest version of elm-format was enough for format on save to work.
One case where format on save does not work by following these suggestions is in the elm-0.19-workshop. Format on save will not trigger on Elm files in intro/part1/ or any of the other "part" directories.
Not setting the paths to elm-format and elm-tests explicitely worked for me.
I ran
npm install --global elm-test elm-format
and let the extension figure out where it is.
As soon as I specify that /home/a-teammate/npm/lib/node_modules/elm-test/bin/elm-format is the elm-format I want to use, it stops working. Although pointing to the same elm-format.
Tested with elmtooling.elm-ls-vscode in version 0.9.4, elm 0.19.1 and elm-format 0.8.3
I had this issue with Prettier formatter being installed as default. I resolved it by overriding formatter for Elm specifically:
"[elm]": {
"editor.defaultFormatter": "elmTooling.elm-ls-vscode"
},
I created a new project with the create-react-app scaffold, and then I wanted to use the optional-chaining plug-in of babel. I installed the package according to the document and configured it, but vscode prompted grammatical errors. What can help me? please.
this is my package.json.
this is the problem:
If you are using CRA there is probably no way instead of ejecting project and applying Babel presets manually (according to https://github.com/facebook/create-react-app/issues/4604).
However, if you are decided to use eject there should be able to add plugin to babel config which is described here https://babeljs.io/docs/en/babel-plugin-proposal-optional-chaining. Probably applying stage-0 preset of Babel (https://babeljs.io/docs/en/babel-preset-stage-0) can also be a solution.
Edit: see also Null-safe property access (and conditional assignment) in ES6/2015
The error you are seeing is from Visual Studio Code's built-in JavaScript and/or TypeScript validator. In order to circumvent this, add this to your vscode settings.json file:
"javascript.validate.enable": false
Additionally you can disable the built-in TypeScript validator like this:
"typescript.validate.enable": false
Once those are disabled, eslint will take over and show you the proper errors when applicable.
I am getting the linting error in my code 'import' is only available in ES6 (use 'esversion: 6').
Everything es6 related is throwing an error. Not sure what I have to configure to get it to work.
Add a file named .jshintrc to your project and inside this file type this:
{
"esversion": 6
}
As you can see it here:
The full documentation of jshint options are found here: http://jshint.com/docs/options
Edit: I've added a way to enable es6 if you use ESLint instead of JSHint as well as updating the screenshots since VSCode has changed since my original answer.
JSHint Method:
If you are using JSHint, you can add the following to your settings:
"jshint.options":{
"esversion":6
}
ESLint Method:
If you are using ESLint, you can add the following to your settings:
"eslint.options": {
"env":{
"es6":true
},
"parserOptions": {
"ecmaVersion": 6 // or 7,8,9
}
}
ESLint Configuration Documentation
How to update the settings
Neither JSHint or ESLint are enabled in a fresh version of VS Code, so you'll need to install the extension(s) by going to extensions and then searching for your preferred linter.
In VS Code, head to settings
When the settings display you'll see the settings sections:
Note that there are two sections where you can customize your settings, User Settings and Workspace Settings
User Settings Is where you should apply any global settings you will want for any project you will ever work on.
Workspace Settings Is where you can make settings changes that should only be applied to your current project.
In my case, since I know that only some of my projects can use ES6, I need to have the error hinting to warn me if I'm using ES6 my non-ES6 projects...so I set this only to my Workspace Settings
But, if you know that anything you code in VS Code is going to be an ES6, project, then save a step, and add it to your user settings.
Click on either User/Workspace depending on your preference. Search for JSHint or ESLint (whichever you use). Click on any of the Edit in settings.json links, it doesn't matter which one.
Add the pertinent settings depending on whether you use JSHint or ESLint:
JSHint
ESLint
You can add "esversion": 6 to "jshint.options" in the user settings.
{
"jshint.options": {
"esversion": 6
}
}
Just to round out the excellent suggestions already submitted, you can also set this on a file by file basis by added this escaped line (and similar for other jshint settings) to the top of your file.
// jshint esversion:6
Actually you can add it anywhere, but it only effects subsequent code, allowing you to flip settings on and off if you're desperate to do something weird.
Add the next hint before your code:
/* jshint esversion: 6 */
Example
Make sure, you do the above configurations with the json but also remove/disable the jshint extension for workspace if you're using eslint and vice versa.,
Disable your jshint extension like this: