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)"
]
}
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.
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.