Visual Studio Code: Use esnext option? - ecmascript-6

I have lots of ES6 related errors in Visual Studio code when working with ES6 JavaScript files. Where can I use the esnext option what the error tells me to do??
UPDATE
Having a jsconfig.json with the following is NOT enough:
{
"compilerOptions": {
"target": "ES6"
}
}

I've found out: you need a .jshintrc file with the following:
{
"esnext": true
}
As #aloisdg said: jsconfig.json has an issue with this.
Also, .eslintrc is not supported at the moment AFAIK.

It is a linting issue. You can ignore it.
You may want to check Salsa as recommended in this issue in the vscode's repository.
Also, you may want to add "module": "commonjs" in compilerOptions into your jsconfig.json.
{
"compilerOptions": {
"target": "ES6",
"module": "commonjs"
}
}

Related

Close self-closing HTML tags on save in VS Code?

When I copy HTML snippets into JSX I often get errors because self closing tags in HTML can be unclosed like <hr> but in JSX they must always be closed like <hr />, is there a plugin or setting that can automatically fix these for me?
I ended up solving it by doing a regex find and replace on all void elements.
find: <((area|base|br|col|command|embed|hr|img|input|keygen|link|meta|param|source|track|wbr).*?[^\/])>
replace: <$1 />
First you need to write below code in your settings.json
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
}
then create a .eslintrc file in root level and write this code
{
"extends": ["react-app"],
"rules": {
"react/self-closing-comp": [
"error",
{
"component": true,
"html": true
}
]
}
}
I've used this extension with VS Code for a while now. Works really well with React in both Javascript and Typescript - https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag. The doc says it works by default for the following languages. Try it and see if it is for right for your needs.
{
"auto-close-tag.activationOnLanguage": [
"xml",
"php",
"blade",
"ejs",
"jinja",
"javascript",
"javascriptreact",
"typescript",
"typescriptreact",
"plaintext",
"markdown",
"vue",
"liquid",
"erb",
"lang-cfml",
"cfml",
"HTML (Eex)"
]
}

Angular 6 and bpmn-properties-panel

I am trying to use bpmn.io in my project.
So i tried to integrate bpmn-properties-panel with Angular.
I had installed all the modules and imported them.
But i am not getting all the properties what they are showing.
What i am getting is below image
As you can see i am not able to see all the properties of specific task.
and i went through their official forum Angular 6 and properties-panel
and if i do like that
import camundaModdleDescriptor from 'camunda-bpmn-moddle/resources/camunda.json';
i am getting error
Cannot find module 'camunda-bpmn-moddle/resources/camunda.json'. Consider using '--resolveJsonModule' to import module with '.json' extension
Help me!
Thanks in advance.
You can get Camunda.json file here
The solution is explained in the error. you need to enable the resolveJsonModule option from tsconfig.json:
{
"compilerOptions": {
"target": "es2015",
"module": "commonjs",
"strict": true,
"moduleResolution": "node",
"resolveJsonModule": true
}
}
more informations in this link:
https://mariusschulz.com/blog/importing-json-modules-in-typescript

TSLint throwing warning

My tslint.json looks like the following
{
"defaultSeverity": "error",
"extends": [
"tslint:recommended"
],
"jsRules": {},
"rules": {},
"rulesDirectory": []
}
My gulp file has a task named tslint which looks like:
gulp.task('tslint', function() {
return gulp.src(lintFiles)
.pipe(tslint({
formatter: "verbose"
}))
.pipe(tslint.report());
});
When I run gulp tslint, it throws me the following warning
Following rules specified in configuration couldn't be applied to .js or .jsx files:
no-reference-import
Make sure to exclude them from "jsRules" section of your tslint.json.
In order to exclude I changed "jsRules": {}, to "jsRules": {"no-reference-import": false }, still no change and I got the same warning. I googled about it and could not find anything. Can you please help me?
This is an issue with the current version of tslint 5.0.0. The issue has been referenced here. You can go back to a previous version of tslint as a workaround until the issue is fixed.

Eslint - `Parsing error: unexpected token =` error for assigned fat arrow / property initializer

I'm using an arrow function and it's complaining about a parsing error:
Parsing Error: Unexpected token =
However my code is valid (please tell me if i'm mistaken). Additionally, i've set the .eslintrc settings to use es6 parsing:
.eslintrc
{
"parserOptions": {
"ecmaVersion": 6,
}
}
Here's my code:
class foo() {
// Doesn't like the line below
// even though it is valid:
namedFunction = () => {
}
}
There a way to resolve this error? This makes a huge different in terms of what the value of this from a particular function.
You're using class field (a.k.a. property initializer) syntax, which is not part of ECMAScript 2015 (ES6), nor ES2016 or 2017, and so unsupported by ESLint. It's currently a Stage 3 proposal. If you want to use it with ESLint, you'll need to use babel-eslint. That page describes how to use it, but the gist is:
Installation
$ npm install eslint babel-eslint --save-dev
# or
$ yarn add eslint babel-eslint -D
Note: babel-eslint requires babel/core#>=7.2.0 and a valid Babel configuration file to run. If you do not have this already set up, please see the Babel Usage Guide.
Setup
To use babel-eslint, "babel-eslint" must be specified as the parser in your ESLint configuration file (see here for more detailed information).
.eslintrc.js
module.exports = {
parser: "babel-eslint",
};
With the parser set, your configuration can be configured as described in the Configuring ESLint documentation.
In 2021 it seems that babel-eslint has been deprecated in favour of #babel/eslint-parser, according to the GitHub repo:
NOTE: babel-eslint is now #babel/eslint-parser and has moved into the Babel monorepo.
So to update the instructions from the other answers, you need to:
npm i eslint #babel/eslint-parser --save-dev
Then make sure you configure the parser key in .eslintrc:
{
"parser": "#babel/eslint-parser",
...
}
As an aside, as the OP doesn't mention the runtime, I'm running in Node 12 so I don't need babel to transpile my code but ESlint does need babel to lint the code (sounds weird but that's my understanding). So I also needed a basic babel config, babel.config.json:
{
"presets": [
[
"#babel/env",
{
"targets": {
"node": "12"
}
}
]
]
}
I had a very similar problem. The accepted answer is correct, as far as it goes, and very helpful. But I use a json version of the eslint config, not a javascript one, so once babel-eslint was installed using:
npm i eslint babel-eslint --save-dev
I had to change my json config. It looks like this now:
.eslintrc.json
{
"parserOptions": {
"es6": true,
"ecmaVersion": 6,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"parser": "babel-eslint",
"rules": {
"no-unused-vars": 0
},
"env": {
"browser": true,
"node": true
}
}
It seems that native support for Public class fields without the need for a babel parser is now finally supported in Eslint since eslint8 with setting ecmaVersion: 13.

tsconfig.json: Build:No inputs were found in config file

I have an ASP.NET core project and I'm getting this error when I try to build it:
error TS18003: Build:No inputs were found in config file 'Z:/Projects/client/ZV/src/ZV/Scripts/tsconfig.json'. Specified 'include' paths were '["**/*"]' and 'exclude' paths were '["../wwwroot/app","node_modules/*"]'.
1> The command exited with code 1.
1> Done executing task "VsTsc" -- FAILED.
This is my tsconfig.json file:
{
"compileOnSave": true,
"compilerOptions": {
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": [ "es5", "dom" ],
"module": "commonjs",
"moduleResolution": "node",
"noEmitOnError": true,
"noImplicitAny": false,
"outDir": "../wwwroot/app/",
"removeComments": false,
"sourceMap": true,
"target": "es6"
},
"exclude": [
"../wwwroot/app",
"node_modules/*"
]
}
Is this a bug or am I doing something wrong? I did recently upgrade Visual Studio 2015 to update 3. Has anyone encountered this before?
Add an empty typescript file to the typescript scripts folder (the location of your tsconfig file) to satisfy the typescript compiler.
You can also try to restart your code editor. That works well too.
This can occur because typescript server can't find any files described by the include array:
// tsconfig.json
{
//...
"include": [
"./src/"
],
}
If you're using VSCode, you can restart your TS server within your editor super easily to prompt it to re-evaluate the file like this:
Navigate to any .ts or .tsx file
Open the command palette (CMD + SHIFT + P on mac)
Run the TypeScript: Restart TS server command:
I'm not using TypeScript in this project at all so it's quite frustrating having to deal with this. I fixed this by adding a tsconfig.json and an empty file.ts file to the project root. The tsconfig.json contains this:
{
"compilerOptions": {
"allowJs": false,
"noEmit": true // Do not compile the JS (or TS) files in this project on build
},
"compileOnSave": false,
"exclude": [ "src", "wwwroot" ],
"include": [ "file.ts" ]
}
If you are using the vs code for editing then try restarting the editor.This scenario fixed my issue.I think it's the issue with editor cache.
I have all of my .ts files inside a src folder that is a sibling of my tsconfig.json. I was getting this error when my include looked like this (it was working before, some dependency upgrade caused the error showing up):
"include": [
"src/**/*"
],
changing it to this fixed the problem for me:
"include": [
"**/*"
],
In modern typescript config just set "allowJs" and no need to add any empty .ts file in include directories such as "src" (specified in include array)
tsconfig.json
{
"compilerOptions": {
"allowJs": true,
...
},
"include": [
"src"
]
}
When you create the tsconfig.json file by tsc --init, then it comments the input and output file directory. So this is the root cause of the error.
To get around the problem, uncomment these two lines:
"outDir": "./",
"rootDir": "./",
Initially it would look like above after un-commenting.
But all my .ts scripts were inside src folder. So I have specified /src.
"outDir": "./scripts",
"rootDir": "./src",
Please note that you need to specify the location of your .ts scripts in rootDir.
I was getting this error:
No inputs were found in config file 'tsconfig.json'.
Specified include paths were '["**/*"]' and exclude paths '["**/*.spec.ts","app_/**/*.ts","**/*.d.ts","node_modules"]'.
I had a .tsconfig file, which read TS files from the ./src folder.
The issue here was that with the source folder not containing any .ts files and I was running tslint. I resolved issue by removing tslint task from my gulp file, as I don't have any .ts files to be compiled and linted.
Changing index.js to index.ts fixed this error for me. (I did not have any .ts files before this).
Note: remember to change anywhere you reference index.js to index.ts except of course, where you reference your main file. By convention this is probably in your lib or dist folders.
My tsconfig.json:
{
"compilerOptions": {
"target": "es2016",
"module": "commonjs",
"outDir": "./dist",
"strict": true,
"esModuleInterop": true,
"inlineSourceMap": true,
"noImplicitAny": false
}
}
My outDir is ./dist so I reference my main in my package.json as "main": "dist/index.js"
"outDir"
Should be different from
"rootDir"
example
"outDir": "./dist",
"rootDir": "./src",
You need to have the root index.tsx or index.ts file for the tsc command to work.
I added the following in the root ( visual studio )
{
"compilerOptions": {
"allowJs": true,
"noEmit": true,
"module": "system",
"noImplicitAny": true,
"removeComments": true,
"preserveConstEnums": true,
"sourceMap": true
},
"include": [
"**/*"
],
"exclude": [
"assets",
"node_modules",
"bower_components",
"jspm_packages"
],
"typeAcquisition": {
"enable": true
}
}
The solution that worked for me was to add a ./ before each include path in the config file:
"include": ["./src/**/*.d.ts", "./src/**/*.js", "./src/**/*.svelte"]
Ok, in 2021, with a <project>/src/index.ts file, the following worked for me:
If VS Code complains with No inputs were found in config file... then change the include to…
"include": ["./src/**/*.ts"]
Found the above as a comment of How to Write Node.js Applications in Typescript
When using Visual Studio Code, building the project (i.e. pressing Ctrl + Shift + B), moves your .ts file into the .vscode folder (I don't know why it does this), then generates the TS18003 error.
What I did was move my .ts file out of the .vscode folder, back into the root folder and build the project again.
The project built successfully!
add .ts file location in 'include' tag then compile work fine. ex.
"include": [
"wwwroot/**/*" ]
My VSCode was giving me the squiggly line at the beginning of my tsconfig.json file, and had the same error, so
I made sure I had at least one .ts file in the folder specified in the "include" paths (one of the folders in the include path was empty and it was fine)
I simply closed the VSCode and opened it back up, and that fixed it. (sigh..)
My folder structure
tsconfig.json
package.json
bar/
myfile.ts
lib/
(no file)
My tsconfig.json
"compilerOptions": { ... },
"include": [
"bar/**/*",
"lib/**/*"
],
"exclude": [
".webpack/**/*",
".vscode/**/*"
]
If you don't want TypeScript compilation, disable it in your .csproj file, according to this post.
Just add the following line to your .csproj file:
<TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>
I had to add the files item to the tsconfig.json file, like so:
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"sourceMap": true,
},
"files": [
"../MyFile.ts"
]
}
More details here: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html
Btw, just had the same problem.
If you had my case, then you probably have the tsconfig.json not in the same directory as the .ts file.
(In my case I stupidly had next to launch.json and tasks.json inside the .vscode folder :P)
I had existing tsconfig files for 4 existing projects in my solution. After upgrading to vs2017 I experienced this problem. It was fixed by adding the (supposedly default) include and exclude sections to the files, as described by NicoJuicy.
For anyone experiencing the same error should try adding "node modules" to the exclude options
{
"compilerOptions": {
...
},
"include": [
"./src/**/*.ts"
],
"exclude": [
"./out.d.ts",
"node_modules",
]
}
If you are using VSCode, and you have several folders opened then you need to open the one folder you are working on for it to go away.
Wrong Opening of Folder
Right Opening of Folder
I have a tsconfig.json file that doesn't apply to any .ts files. It's in a separate folder. Instead I only use it as a base for other tsconfig files via "extends": "../Configs/tsconfig.json". As soon as I renamed the base config file to something else e.g. base-tsconfig.json (and updated the extends statements) the error went away and the extending still worked.
I got the same error and in my case it was because vscode couldn't recognize .ts file.
It was seeing it as text file and I had to rename it to remove one letter and add it back to make it work.
I ran into this issue constantly while packing my projects into nugets via Visual Studio 2019. After looking for a solution for ages I seem to have solved this by following advice in this article
MSBuild & Typescript
especially part about <TypeScriptCompile /> where I included all my .ts resources with the Include operator and excluded others such as node_modules with the Remove operator. I then deleted the tsconfig.json file in each offending project and the nuget packages were generated and no more errors
I received this same error when I made a backup copy of the node_modules folder in the same directory. I was in the process of trying to solve a different build error when this occurred. I hope this scenario helps someone. Remove the backup folder and the build will complete.
I had the same error because I had this:
"include": [
"wwwroot/ts/*.ts"
],
"exclude": [
"node_modules",
"wwwroot"
]
The error appear because the folder wwwroot appear in include and exclude, you should quit one of them.
Make sure all your files has a correct name.