We are going to make our JavaScript files typed safe, that your JS files will feel like if they were typescript. this can be done for any JavaScript project, but we will focus on react.
I have a create-react-app project. let's add a jsconfig.json file in the root of the project
a jsconfig.json file is a tsconfig.json with the allowJs and the checkJs as true.
{
"compilerOptions": {
"incremental": true,
"target": "es2020",
"composite": true,
"module": "ESNext",
"lib": [
"DOM",
"esnext",
"ES2015",
"ES2016",
"ES2017",
"ES2018",
"ES2019"
],
"allowJs": true,
"checkJs": true,
"jsx": "preserve",
"declaration": true,
"reactNamespace": "React",
"declarationMap": true,
"sourceMap": true,
"outDir": "typings",
"rootDir": ".",
"tsBuildInfoFile": "./tsBuildInfoFile.json",
"isolatedModules": true,
"moduleResolution": "node",
"baseUrl": "./node_modules",
"importHelpers": true,
"noImplicitAny": false,
"resolveJsonModule": true,
"noImplicitReturns": true,
"alwaysStrict": true,
"assumeChangesOnlyAffectDirectDependencies": true,
"allowUnusedLabels": false,
"paths": {
"*": [
"./*",
"./@types/*"
]
},
"types": [
"node",
"react"
],
"allowSyntheticDefaultImports": true,
"esModuleInterop": false,
"traceResolution": true,
"skipLibCheck": false,
"forceConsistentCasingInFileNames": true,
"pretty": true
},
"typeAcquisition": {
"enable": true
},
"exclude": [
"node_modules",
],
"include": [
"src",
"type"
]
}
Next you need to create a folder call .vscode and add a file inside it call settings.json
{
"javascript.suggestionActions.enabled": true,
"javascript.inlayHints.parameterNames": "all",
"javascript.inlayHints.variableTypes.enabled": true,
"javascript.inlayHints.parameterTypes.enabled": true,
"javascript.inlayHints.functionLikeReturnTypes.enabled": true,
"javascript.autoClosingTags": true,
"javascript.format.enable": true,
"javascript.format.insertSpaceAfterCommaDelimiter": true,
"javascript.format.insertSpaceAfterConstructor": true,
"javascript.format.insertSpaceAfterFunctionKeywordForAnonymousFunctions": true,
"javascript.format.insertSpaceAfterKeywordsInControlFlowStatements": true,
"javascript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyParenthesis": false,
"javascript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBrackets": true,
"javascript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBraces": true,
"javascript.format.insertSpaceAfterOpeningAndBeforeClosingEmptyBraces": true,
"javascript.format.insertSpaceAfterOpeningAndBeforeClosingTemplateStringBraces": true,
"javascript.format.insertSpaceAfterOpeningAndBeforeClosingJsxExpressionBraces": true,
"javascript.format.insertSpaceAfterSemicolonInForStatements": true,
"javascript.format.insertSpaceBeforeAndAfterBinaryOperators": true,
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
"javascript.format.placeOpenBraceOnNewLineForControlBlocks": false,
"javascript.format.placeOpenBraceOnNewLineForFunctions": false,
"javascript.format.semicolons": "insert",
"javascript.format.quoteStyle": "double",
"javascript.inlayHints.enumMemberValues.enabled": true,
"javascript.inlayHints.parameterNames.enabled": "all",
"javascript.inlayHints.propertyDeclarationTypes.enabled": true,
"javascript.inlayHints.parameterNames.suppressWhenArgumentMatchesName": true,
"javascript.preferences.importModuleSpecifier": "shortest",
"javascript.preferences.importModuleSpecifierEnding": "auto",
"javascript.preferences.jsxAttributeCompletionStyle": "auto",
"javascript.preferences.quoteStyle": "double",
"javascript.preferences.useAliasesForRenames": true,
"javascript.referencesCodeLens.enabled": true,
"javascript.suggest.completeJSDocs": true,
}
Top comments (6)
Awesome!, webstorm does this automatically, reading the @types definitions and applying on autocomplete sugguestions, can you edit the post and explain more about applied settings?
what about settings ? ui settings ? or setting focus on what ?
very good article, I enjoyed it!
Tough
great, information
awesome information