I have the latest version of VsCode, and I am following a tutorial to create a basic next.js app
I noticed that the tutorial uses JSX in .JS files, and my editor does not complain about the JSX.
How is this possible? Does VsCode by default recognize JSX in .JS files? And does next.js automatically compile JSX?
Yes VS Code support JSX in both *.js and *.jsx files out of the box. This only impacts intellisense and other editor features. We do not provide any built-in compiler integration but you can easily set up your own with tasks or using the command line
Behind the scenes, the reason jsx is enabled in *.js files that we create an implicit jsconfig.json that looks like:
{
"compilerOptions": {
"target": "ES6",
"module": "commonjs",
"jsx": "preserve"
},
"exclude": [
"node_modules",
"**/node_modules/*"
]
}
Related
We are adding typescript to our project which for legacy and migration purposes overtime has had *.es6 files for source es6 modules vs *.js (which are loose generated files and bundles).
What i have found in typescript is i can import these exact files if they are .js / .ts, i would prefer not to have to rename and change all build tooling and etc from .es6 to .js for all files in the repo. Im assuming there should be a way to say treat extension of "es6" as a "js" non-ts file
p.s. Also if this is maybe an IDE issue (but ther error is coming direct from TS), my IDE is VSCode
Example:
// asbstracted models
import { Model } from "./model.es6"; // js (because ext, typescript intellisense error)
// resources
import { http } from '../utils/http.es6'; // js (because ext, typescript intellisense error)
import { Rando } from '../utils/rando'; // ts (ok)
import { Rando2 } from '../utils/rando2.js'; // js (ok)
...
I tried adding all sort of things to tsconfig.json. Babel / webpack can compile the bundle fine, but the tsconfig in vscode is throwing. The lint error is:
Cannot find module '../utils/http.es6' or its corresponding type declarations.ts(2307)
tsconfig.json
{
"include": [
"js_es6/**/*.ts",
"js_es6/**/*.es6",
],
"types": ["./types/index.d.ts"],
"compilerOptions": {
"allowJs": true,
"target": "es6",
"module": "commonjs",
"moduleResolution": "node",
"baseUrl": "./",
"paths": {
"#js_es6/*": ["js_es6/*"],
}
}
}
I am new to typescript configuration but is it flexible enough to allow variable file extensions for js, as up into now build tooling and js is more or less extension agnostic.
image for additional reference:
My structure is:
/Home
/home.js
/Home.jsx
In .jsx I'm trying to use go to defenition feature on path with webpack alias. To resolve webpack aliases I have jsconfig.json with this params:
{
"compilerOptions": {
"target": "es6",
"module": "es6",
"moduleResolution": "node",
"jsx": "react-jsx",
"baseUrl": "./",
"paths": {
"#/*": ["src/*"]
}
},
"exclude": ["node_modules", "dist"]
}
And only in this type of situation
when .jsx and .js files of same name in same folder
I can't use the feature.
If I rename file it starting to work. Also it works in WebStorm without any changes.
Please, tell me what's wrong...
I fixed it!
The problem has disappeared when I deactivated this extenssion: JavaScript and TypeScript Nightly
VSCode uses TS engine under the hood to analyze JS. And the convention in TS is to omit file extension. So from TS engine’s POV, these two files of same name but diff extension are confusing.
I guess it’s just a limitation (or a bug? I’m not sure) of the TS language engine, not necessary anything you did wrong. WebStorm obviously uses other implementation to analyze/resolve package reference. Thus you don’t encounter problem there.
I don’t really know solution to your problem, can only provide above explanation. If I were you I’d just rename my file, not gonna spend time fighting tools.
Is there a way to get the ahead of time validation feature of TypeScript to work in a pure JavaScript project? I would install TypeScript but it honestly seems a bit intimidating and useless for my purposes.
You can enable type checking in a Javascript project just by using a tsconfig.json file. No need to actually compile Typescript files.
{
"compilerOptions": {
"outDir": "./built",
"checkJs": true,
"allowJs": true
}
}
I'm upgrading an AngularJS app to Angular, and I've created a hybrid AngularJS/Angular project that's using TypeScript 2.6.2. (It essentially works by loading AngularJS through an Angular bootstrap method, using SystemJS for the module loading).
It compiles without errors when I run node installed TypeScript from the Windows command line using:
npm run tsc
When I first tried building the project in Visual Studio 2015, the TypeScript didn't transpile to JavaScript, so I've tried adding the following to the .csproj file (there were previously no instructions to include TypeScript files):
<ItemGroup>
<TypeScriptCompile Include="**\*.ts" />
Now I get the following build errors:
My project structure is like this:
And my tsconfig.json
{
"compilerOptions": {
"target": "es5",
"module": "system",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": [ "es2015", "dom" ],
"noImplicitAny": false,
"suppressImplicitAnyIndexErrors": true,
"noStrictGenericChecks": true
},
"include": [ "**/*.ts" ]
}
What could be going on and what might I do to get the project building successfully?
I discovered that the reason my project wasn't building successfully through Visual Studio is that I needed to include my tsconfig.json file in the solution. That causes Visual Studio to ignore the TypeScript configuration in the .csproj file and use tsconfig.json instead
I had to unload and re-load the project a few times, saving in between, until the VS2015 project properties were recognised by Visual Studio as being disabled. Closing and re-opening Visual Studio, saving any changes to the project if prompted, would probably achieve the same thing:
The project now builds without having to use:
<TypeScriptCompile Include="**\*.ts" />
and I no longer have any errors in the solution.
(I also installed and uninstalled the 'TypeScript Compiler' using the Nuget Package Manager in Visual Studio, although I'm unsure if this had any effect, since I'd already installed the TypeScript Build Tools for VS2015 from https://www.microsoft.com/en-us/download/details.aspx?id=48593)
I am trying to migrate my code from java script to type script and using Visual Studio Code as editor.
When I rename the files from js to ts in my project, I do not see any suggestions / warnings (usually underlined red color - say for example variable type not declared in origianl JS file).
Currently I am compiling the ts code manually and fixing the errors but is there any preference setting in VS code to detect the errors directly instead of compiling and checking ?
The tsconfig.json is:
{
"compilerOptions": {
"module": "commonjs",
"allowJs": true,
"target": "es6"
},
"exclude": ["node_modules"]
}
Thank you.
Added the below type definition rule to tslint.json file to get this reflected in VS code editor: "typedef": [true, "call-signature", "parameter", "member-variable-declaration"] - That solved the issue.