In VSCode, I get the error:
"Experimental support for decorators is a feature that is subject to change in a future release. Specify '--experimentalDecorators' to remove this warning."
I can add the --experimentalDecorators flag to my tasks.json file to remove this error on build, but I can't seem to remove it from my intellisense or error list when I load VSCode.
Is there a way to do this?
I was having this same error. I added the following tsconfig.json file to my project root, restarted VSCode and it finally went away:
{
"compilerOptions": {
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"module": "amd",
"target": "ES6"
}
}
UPDATE:
I've noticed that sometimes VS Code will not suppress this warning until you add a "files" array in your tsconfig.json, even an empty one will work. For me this has worked every single time now, if the message does not disappear, try the following:
{
"compilerOptions": {
...
},
"files": [],
"exclude": [
"node_modules"
]
}
Perhaps this will explain why everyone has mixed results?
VSC is by default looking at its own TS library and definition. If you're using a different version (which is very likely) you should point VSC to look for that versions definition.
In my settings.json file, i have the following set up:
// Place your settings in this file to overwrite default and user settings.
{
"typescript.tsdk": "node_modules\\typescript\\lib"
}
I believe you can set this for either your User Settings or your Workspace Settings. So you can do a one time configuration in your User Settings or just for one project/workspace. This works if you have your typescript installed locally in the specified folder - which i believe is the default nodes module folder.
To edit your settings go to File/Preferences/User Setting or File/Preference/Workspace Settings.
UPDATE: Visual Studio Code just released a new version with better support for different versions of typescript. Check it out here: https://code.visualstudio.com/updates#_languages
I've to add the following in the settings.json file of vscode to remove the warning.
"javascript.implicitProjectConfig.experimentalDecorators": true
VSCode -> Preferences -> Settings
You could do it the hard way by deleting the lines which create the error in %code%\resources\app\plugins\vs.language.typescript\lib\tsserver.lib.
Look for the following code and delete it
if (!compilerOptions.experimentalDecorators) {
error(node, ts.Diagnostics.Experimental_support_for_decorators_is_a_feature_that_is_subject_to_change_in_a_future_release_Specify_experimentalDecorators_to_remove_this_warning);
}
Struggling with this across two different Angular 2 final release projects, this is my solution.
tsconfig.json in the src fold.
{
"compilerOptions": {
"experimentalDecorators": true
}
}
AND
Add this setting to File->Preferences->User settings
"typescript.tsdk": "node_modules\\typescript\\lib"
As other answers pointed out, your Visual Studio Code needs to find the tsconfig.json file.
I had the same problem. And it's mostly because I didn't realize the project structure.
(Hint: Read the text from top to bottom in the picture below).
I had confused the tsconfig.json with the tsconfig.app.json.
And I had opened the wrong folder in Visual Studio. As a result, the tsconfig.json was not in scope.
Simply opening the right root folder (i.e. the project folder, one level higher than the src.) solved the problem for me.
This helped me with React JS files (VSCode Version 1.9.1).
1) Put into tsconfig.json:
{
"compilerOptions": {
"experimentalDecorators": true,
"allowJs": true
}
}
2) Restart VS Code.
Note: as Tim mentioned below, you need to add the tsconfig.json even if your not using TypeScript.
Source: https://ihatetomatoes.net/how-to-remove-experimentaldecorators-warning-in-vscode/
You can use "typescript.tsdk" in setting.json to change specific folder path containing tsserver.js and lib.ts files used by VSCode.
See this example: Can I use a relative path to configure typescript sdk?
note: You find setting.json in File > Preferences > User Settings.
If you use Grunt (grunt-ts), you must also add "experimentalDecorators: true" as option in the file gruntfile.js .
Your file should look something like this at the end:
module.exports = function(grunt) {
grunt.initConfig({
ts: {
default : {
src: ["**/*.ts", "!node_modules/**"]
},
options: {
experimentalDecorators: true
}
}
});
grunt.loadNpmTasks("grunt-ts");
grunt.registerTask("default", ["ts"]);
};
For more information you can read documentation on github https://github.com/TypeStrong/grunt-ts#experimentaldecorators
In Visual studio code 1.3.1 my fix is in C:\Program Files (x86)\Microsoft VS Code\resources\app\extensions\typescript\server\typescript\lib\tsserver.js and comment out or delete the line.
if (!compilerOptions.experimentalDecorators) {
error(node, ts.Diagnostics.Experimental_support_for_decorators_is_a_feature_that_is_subject_to_change_in_a_future_release_Specify_experimentalDecorators_to_remove_this_warning);
}
I was having same error i figure it out as this was i name component file extension as .js it should be .ts
Even when opening VSCode at the right level within your project you might still need an extra tsconfig file in your root. I now have a tsconfig in my project root (only containing php index and folders), ts folder (legacy typescript classes) and my src folder (vue components).
Don't forget to close the folder and to restart VSCode.
Please check you oppened in your VS Code the folder of the entire project and not only the src folder, because if you open only the src, then ts.config.json file will not be in scope, and VS will not recognize the experimental decorators parameters.
In my case this fixed all the problem
I already had experimental decorators enabled in tsconfig.json, so I was a bit baffled until I found this thread on GitHub where someone says to check the settings in VS Code.
So I went to File --> Preferences --> Settings and searched for experimental decorators and checked both of these settings:
Here are the details of my version of VSCode:
Version: 1.52.1 (user setup)
Commit: ea3859d4ba2f3e577a159bc91e3074c5d85c0523
Date: 2020-12-16T16:34:46.910Z
Electron: 9.3.5
Chrome: 83.0.4103.122
Node.js: 12.14.1
V8: 8.3.110.13-electron.0
OS: Windows_NT x64 10.0.18363
Below answer for VSCode version 1.60.12
press "ctrl" + ",".
type "settings.json".
see this image to click on settings..
paste "js/ts.implicitProjectConfig.experimentalDecorators":true -->
See my settings for reference
Related
I follow the guide to install stylelint vscode extension, but it does not work on my computer.
I'm pretty sure that I follow all the necessary steps.
Install Extensions.
Disable the built-in linters in User setting.
Use npm to install stylelint and its standard configuration.
Create a .stylelintrc.json configuration file in the root of my project.
Run stylelint from command-line.
But the extention still not automatically validate the css, what is going wrong?
After reading the guide again, I found the setting stylelint.config and understand its definition:
Set stylelint config option. Note that when this option is enabled, stylelint doesn't load configuration files.
So I look at my vscode user setting, oh, stylelint.config: {}. After changing it to null, stylelint automatically validates the css file immediately.
Phew~
I faced the same issue. Let me share how I got it to work smoothly with Stylelint extension ver.1.2.2:
In root project folder, you should have the following structure:
/path/to/project/
.vscode/
settings.json
extensions.json
src/
.stylelintrc.json
package.json
extensions.json
From the official documentation: Starting with 1.x, vscode-stylelint will depend on having a copy of Stylelint installed in the open workspace (recommended) or globally (not recommended). If the extension doesn't seem to be linting any documents, make sure you have Stylelint installed
{
"recommendations": ["stylelint.vscode-stylelint"]
}
settings.json
{
"css.validate": false,
"less.validate": false,
"scss.validate": false,
"stylelint.validate": ["css", "scss"]
}
package.json
Some of the following packages are to detect reserved words inside sass files such us #use, #export, #global and so on. I think you don't actually need all of them, but it is my configuration.
// DevDependencies
"stylelint": "^14.6.0",
"stylelint-config-css-modules": "^4.1.0",
"stylelint-config-standard-scss": "^3.0.0",
"stylelint-scss": "^4.2.0"
.stylelintrc.json
{
"extends": ["stylelint-config-standard-scss", "stylelint-config-css-modules"],
"plugins": ["stylelint-scss"],
"rules": {
"at-rule-no-unknown": null,
"scss/at-rule-no-unknown": true
}
}
After configuring each file, remember to close vscode and open it again in order to start enjoying Stylelint!
In the extension settings, you should to check the file extensions, which it is watching:
Stylelint: Snippet
Stylelint: Validate
You can also do it through setting.json
"stylelint.snippet": [
"css",
"less",
"postcss",
"scss"
],
"stylelint.validate": [
"css",
"less",
"postcss",
"scss"
]
Open extension settings to add a configuration rules source stylelint-config-standard-scss (or whatever you installed, more here )
For example, I have this, additionally rewritten some of my rules:
"stylelint.config": {
"extends": "stylelint-config-standard-scss",
"rules": {
"no-empty-source": null,
"no-missing-end-of-source-newline": null,
"max-line-length": [
300,
{"ignore": ["comments"]}
],
"selector-combinator-space-after": "never",
"selector-combinator-space-before": "never"
}}
The same settings in the linter for the GitHub Action and in the VSCode extension are very convenient. Now I know about the problems in advance and do not wait until the build happens in the repository.
I got a new PC and installed the newest version, 1.2.1, and nothing worked - then I checked the version on the old PC, and it was at version 0.86.0. When changing the version to the older version and reloading VSC, it worked immediately.
Everytime I open my project folder in Visual Studio Code, I get an error on the first line of each file. It cannot find my tsconfig.json file because it is looking in the directory I opened VS Code, not where my eslint.json is. I have a functions folder in my root project where the ESLint config is.
Here is part of it:
"parserOptions": {
"ecmaVersion": 2019,
"project": ["./tsconfig.json", "./tsconfig.dev.json"],
"sourceType": "module"
},
When I run my lint command eslint "src/*.{ts,js}", it works perfectly and shows the correct warnings. This means that the VS Code plugin dbaeumer.vscode-eslint parses the .eslintrc.json config differently than what it should.
If I change the project to ["./functions/tsconfig.json", "./functions/tsconfig.dev.json"], then VS Code stops giving the error, but when I run ESLint, it tries to find it in <path/to/project>/functions/functions/tsconfig.json going in the functions directory twice.
Is this a VS Code bug, a dbaeumer.vscode-eslint bug, or am I doing something wrong? What can I do to fix the error?
You can just add this "eslint.workingDirectories": [{ "mode": "auto" }] to your VS Code settings.json.
It should make the error go away, but it can have unintended side effects.
More Info: https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint#settings-options
How to turn off the prettier trailing comma in VS Code?
I go to settings. Select none for the prettier trailing comma. Restart VS Code. Select a piece of TypeScript, press Ctrl + Shift + F and the trailing commas still appear. How could I fix it?
Since you are working on the Tour of Heroes project, it is maybe the .editorconfig file there that introduces conflicts with your VSCode Prettier settings. Try adding the following .prettierrc file at the root of your project :
{
"trailingComma": "none"
}
The .prettierrc file has the highest priority over any setting, so it should override any conflict.
Adding this line to settings.json worked for me.
"prettier.trailingComma": "none"
At the root of the project create the Prettier configuration file: .prettierrc.json
Add this code to your file: .prettierrc.json
{
"trailingComma": "none"
}
Save file and then restart your Visual Studio Code
I was facing same problem and I added this line in the settings and it worked for me.
"prettier.trailingComma": "none"
I had the same experience as your screen recording. Restarting VSCode did the trick for me. I could not find a way to restart the prettier addon... maybe someone can chime in on how to do that.
In VS Code Settings, go to json file and type this:
"prettier.useEditorConfig": false
Prettier has the following rules for where to look for settings (in order of precedence):
A "prettier" key in your package.json file.
A .prettierrc file written in JSON or YAML.
A .prettierrc.json, .prettierrc.yml, .prettierrc.yaml, or .prettierrc.json5 file.
A .prettierrc.js, .prettierrc.cjs, prettier.config.js, or prettier.config.cjs file that exports an object using module.exports.
A .prettierrc.toml file.
Following the first rule, I was able to configure it by adding the following to package.json
"prettier": {
"trailingComma": "none"
}
Run this command:
npm run lint --fix
after formatting...
In my case, the configuration above was not enough.
For this to work for me, in addition to this setting, I had to remove from setting.json:
"[typescriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
Next, enter the command
ctrl + shift + P in vscode
Click on Configure...
Choose Prettier - Code formatter
Now this:
const a = {
a: 10,
b: 15,
};
turns into this:
const a = {
a: 10,
b: 15
}
I have a project with this structure:
-src
-dist
-node_modules
-gulpfile.js
-tslint.json
My typescript files reside in src and are transpiled in a gulp task into dist folder. I've installed tslint locally and started with a plain tslint config:
{
"rules": {
"max-line-length": {
"options": [120]
}
}
}
Now, when I run tslint from a command line, I get warnings about all files in 'src' folder as expected. But VSCode highlights only the errors in currently opened file. The 'Problems' tab is getting filled only when I open a file with a tslint error.
Do I need to add some configuration to VSCode launch.json?
At the moment it seems like it's not possible to show all warnings for all files in a project. You might be able to achieve something similar with a VS Code task that starts a watcher.
There's a feature request for this though.
Is there a way to disable removing space before parentheses when editing a function in VS Code?
Lets say I have a function
function render () {
// some code here
}
When I start editing it, VS Code removes the space before parentheses and transforms this code to:
function render() {
// some code here
}
Is there a way to disable this behavior?
In VS Code open File -> Preferences -> Settings
Add to your JSON config:
"javascript.format.insertSpaceBeforeFunctionParenthesis": true
function render () {
// some code here
}
"javascript.format.insertSpaceBeforeFunctionParenthesis": false
function render() {
// some code here
}
Now you can continue using your auto format option "editor.formatOnType": true
I had opposite problem with anonymous functions. We use prettier extension. Auto-correct inserts a space before parenthesis. And then prettier complains about it.
var anonfunc = function() {
// Expected syntax.
}
var autocorrected = function () {
// Auto-correct inserts a space
}
There is similar code option, which solves my problem:
"javascript.format.insertSpaceAfterFunctionKeywordForAnonymousFunctions": false
By default it is true. Took me some time, until I was tired correcting auto-correct.
I had a similar issue with VSCode removing spaces after a constructor and ESLint complaining because there wasn't a space.
Go to File -> Preferences -> Settings
Search for constructor
Add a check next to JavaScript › Format: Insert Space After Constructor
I'm on the VSCode team. As of VSCode 1.8, this formatting option is not supported out of the box, but we are tracking the feature: https://github.com/Microsoft/vscode/issues/15386, https://github.com/Microsoft/TypeScript/issues/12234
As a workaround, try the following:
Install the eslint extension: ext install eslint
Add "eslint.autoFixOnSave": true to your workspace or user settings
In the root of your project, create an .eslintrc.json with:
{
...
"rules": {
...
"space-before-function-paren": "error"
}
}
The eslint extension can create a starter .eslintrc.json for you with the create .eslintrc.json command.
This will automatically format functions to have a space after them when you save the file.
In my case, I wanted the normal indenting/formatting behavior of VS Code, so I disabled the eslint warning:
In the .eslintrc.js file I typed inside the rules:
'rules': {
....
//disable rule of space before function parentheses
"space-before-function-paren": 0
}
I found out I had "editor.formatOnType": true setting enabled. This is what makes the editor auto-format the code when you type. Disabling it helped to resolve the issue.
Also adding to Yan's answer, you can just hit the Command + , on Mac or CTRL + , on your keyboard then, add the following lines in your settings.json
"javascript.format.insertSpaceBeforeFunctionParenthesis": false,
"javascript.format.insertSpaceAfterFunctionKeywordForAnonymousFunctions": false
The second entry also disables the space for anonymous functions, on format e.g
var anon = function() {
// do something..
}
Go to Preferences, and search for insertSpaceBeforeFunctionParenthesis in the search bar at top.
Now, select the checkbox which says: JavaScript: Format: Insert Space Before Function Parenthesis
Problem:
My issue was in package.json
My project was using prettier#1.18.2 which did not have the space after the function keyword or arrowParens: 'always' as default configuration.
One of the maintainers upgraded prettier to version 2 prettier#2.3.2, which had these two as default config. These were among the breaking changes in prettier version 2.
https://prettier.io/blog/2020/03/21/2.0.0.html#always-add-a-space-after-the-function-keyword-3903
https://prettier.io/blog/2020/03/21/2.0.0.html#change-default-value-for-arrowparens-to-always-7430
Solution:
npm ci - just installed the npm packages again.
npm install will also work. npm ci will install exact versions from package-lock.json, while npm install would install latest versions with minor changes.
In my case I had to explicitly enable ESLint on my Vue.js project even though I had a .eslintrc.js file that should have been implementing:
extends: ['plugin:vue/exxential', '#vue/standard']
To do that I pressed CTRL+Shift+P and searched for "ESLint: Enable ESLint"