I have a very simple 'jsconfig.json' to provide intellisense to my *.js and *.html (<script>) files.
The ES6 part from 'common.js' works ok, but the code inside "script1.js", "lib/lib1.js" are not recognized by the editor.
It seems that intellisense is not enabled for scripts inside html? Is there any way to check/resolve this?
Here is a copy of my jsconfig.json
{
"compilerOptions":
{
"target": "es6",
"module": "commonjs",
"experimentalDecorators" : true,
"allowSyntheticDefaultImports": true
},
"files": [ "script1.js", "lib/lib1.js" ],
"exclude": [ "node_modules" ]
}
External file intellisense in html script blocks is not supported in VSCode 1.14. We are tracking the feature request here: https://github.com/Microsoft/vscode/issues/26338
Related
I have been working on a vsCode extension and was able to launch and debug fine.
But now after bundling the extension with webpack I'm unable to bind breakpoints correctly
Things that I have tried
Apply the solutions mentioned in https://stackoverflow.com/a/53236103/1461862
Change the outFiles from /out/ to /dist/
removing the outFiles configuration
The dist folder contains an extension.js.map but still vscode is unable to bind the breakpoints
but the problem continues
The error I'm getting is:
We couldn't find a corresponding source location, and didn't find any
source with the name extension.ts
Here are the relevant files
lauch.json
{
"version": "0.2.0",
"configurations": [
{
"name": "Run Extension",
"type": "extensionHost",
"request": "launch",
"args": [
"--extensionDevelopmentPath=${workspaceFolder}"
],
"outFiles": [
"${workspaceFolder}/out/**/*.js"
],
"preLaunchTask": "${defaultBuildTask}"
},
{
"name": "Extension Tests",
"type": "extensionHost",
"request": "launch",
"args": [
"--extensionDevelopmentPath=${workspaceFolder}",
"--extensionTestsPath=${workspaceFolder}/out/test/suite/index"
],
"outFiles": [
"${workspaceFolder}/out/test/**/*.js"
],
"preLaunchTask": "${defaultBuildTask}"
}
]
}
Here is the webpack.config.js
'use strict';
const path = require('path');
/**#type {import('webpack').Configuration}*/
const config = {
target: 'node', // vscode extensions run in a Node.js-context 📖 -> https://webpack.js.org/configuration/node/
entry: './src/extension.ts', // the entry point of this extension, 📖 -> https://webpack.js.org/configuration/entry-context/
output: { // the bundle is stored in the 'dist' folder (check package.json), 📖 -> https://webpack.js.org/configuration/output/
path: path.resolve(__dirname, 'dist'),
filename: 'extension.js',
libraryTarget: "commonjs2",
devtoolModuleFilenameTemplate: "../[resource-path]",
},
devtool: 'source-map',
externals: {
vscode: "commonjs vscode" // the vscode-module is created on-the-fly and must be excluded. Add other modules that cannot be webpack'ed, 📖 -> https://webpack.js.org/configuration/externals/
},
resolve: { // support reading TypeScript and JavaScript files, 📖 -> https://github.com/TypeStrong/ts-loader
extensions: ['.ts', '.js']
},
module: {
rules: [{
test: /\.ts$/,
exclude: /node_modules/,
use: [{
loader: 'ts-loader',
options: {
compilerOptions: {
"module": "es6" // override `tsconfig.json` so that TypeScript emits native JavaScript modules.
}
}
}]
}]
},
}
module.exports = config;
You need to change the outFiles configuration in your launch.json file to match the output folder of your webpack bundle. In your case, it should be:
"outFiles": [
"${workspaceFolder}/dist/**/*.js"
]
This will tell VSCode where to look for the source maps and the transpiled JavaScript files that correspond to your TypeScript files. The devtoolModuleFilenameTemplate option in your webpack.config.js file is also important, as it tells webpack how to generate the source map paths relative to your workspace folder.
The reason why you are getting the error We couldn't find a corresponding source location, and didn't find any source with the name extension.ts is because VSCode is looking for the source file in the out folder, which is not where webpack puts it. By changing the outFiles configuration, you are telling VSCode to look for the source file in the dist folder instead, where webpack has generated the source map and the transpiled JavaScript file.
To understand more about how VSCode debugs TypeScript files with webpack, you can read this article: https://code.visualstudio.com/docs/typescript/typescript-compiling#_webpack
I hope this answer helps you solve your problem.
Another solution that is worth trying, is to re-open visual studio directly in the folder that your project is contained within.
On windows (perhaps also mac), navigate to the folder where your project is located with a terminal and open code here with:
code .
Try your debugging tools again, and see whether or not you hit the break points this time.
I am using "MongoDB for VS Code" extension for scripting and running mongodb scripts. I used to format the script code by changing language to javascript and then format and then reverting file language to MongoDB to work. Can someone please let me know how can I associate JavaScript formatter to mongodb file extension without loosing the language support for mongodb.
Came across this same problem this morning, as I started developing Atlas Functions & Aggregation Pipelines but wanted to test them quickly in my local playgrounds. This is what I came up with.
My quick config which enables Prettier and ESLint for MongoDB Playgrounds in VSCode, whilst keeping the Intellisense and MongoDB Playground syntax highlighting.
This requires the following VSCode extensions:
MongoDB for VS Code
ESLint
Prettier
Once the extensions are installed I configured a simple Node project loosely following Add Eslint, Prettier, and Airbnb Style Guide to Your Project, adding the AirBnB styles.
npm init -y
npm i eslint-plugin-import eslint-config-airbnb-base eslint-config-prettier eslint-plugin-prettier prettier -D
npx eslint --init
I use .eslint.json for configuration which I updated as follows
{
"env": {
"browser": true,
"es2021": true
},
"extends": ["airbnb-base", "prettier"],
"overrides": [
{
"files": ["**/*.js", "**/*.mongodb"]
}
],
"parserOptions": {
"ecmaVersion": "latest",
"sourceType": "module"
},
"ignorePatterns": ["node_modules/"],
"plugins": ["prettier"],
"rules": {
"no-console": "off",
"prettier/prettier": "warn"
}
}
Notice in the overrides section I have added **/*.mongodb to the files array. Which will allow ESLint to recognize .mongodb files and parse them as well.
Next I added .prettierrc which also includes *.mongodb in override files arrays.
{
"singleQuote": true,
"tabWidth": 2,
"trailingComma": "es5",
"singleAttributePerLine": true,
"overrides": [
{
"files": "*.mongodb",
"options": {
"parser": "flow"
}
}
]
}
All this config actually has an added bonus, in that in package.json I have defined the following scripts.
"scripts": {
"lint:check": "eslint ./",
"lint:fix": "eslint --fix ./",
"style:check": "prettier --check ./",
"style:fix": "prettier --write ./",
"mongo:check": "prettier --check '**/*.mongodb'",
"mongo:fix": "prettier --write '**/*.mongodb'",
}
I can run these from command line, and they can also be used with pre-commit hooks.
Coming back to VSCode Config, there are a few settings that I added. For prettier there is a setting called prettier.documentSelectors and for ESLint there are eslint.validate and eslint.probe.
"prettier.documentSelectors": ["**/*.mongodb"],
"eslint.probe": [
"javascript",
"javascriptreact",
"typescript",
"typescriptreact",
"html",
"vue",
"markdown",
"mongodb"
],
"eslint.validate": ["mongodb"],
Best to add the above settings into the user settings, although the seem to work even when added to the workspace settings (.vscode/settings.json).
After applying all these I now have ESLint linting the *.mongodb files and Prettier formatting them as well on save.
Here is the repo with the config.
I'm using styled components (via Emotion) and I've found vscode-styled-components plugin to provide appropriate syntax highlighting in vscode. It works very well.
Out of the box, it requires one of 4 tags to be used with the a template literal to recognize the block as a css-string: "styled", "css", "injectGlobal" or "createGlobalStyle".
I would like to use my own custom tag rather than any of these 4.
The plugin doc points to its dependency for configuration info: typescript-styled-components. It shows how to configure the use of additional tags via typescrips's compilerOptions. My react project is not built with typescript, so this is not an option for me.
Question: is there any way to configure the use of tags in a non-typescript project?
Just use a jsconfig.json file instead of tsconfig.json. At the root of your project, create a jsconfig.json file with the contents:
{
"compilerOptions": {
"target": "es6",
"plugins": [
{
"name": "typescript-styled-plugin",
"tags": [
"styled",
"css",
"sty"
]
}
]
},
"exclude": [
"node_modules",
"**/node_modules/*"
]
}
jsconfigs define settings for javascript projects
Also note that the tag options currently do not effect syntax highlighting, only intellisense
I am working with es6 syntax in Visual Studio Code and when I import ordinary file, then I can click F12 (Go to definition) and it works just fine. The problem is that with components (import from .jsx files) it does not work at all (nothing happens when you click go to definition). Has anyone an idea how it can be fixed?
P.S. I have jsconfig.json like that to allow proper go to definition for ordinary .js files:
{
"compilerOptions": {
"target": "ES6"
},
"exclude": [
"node_modules"
]
}
Although you can track down the solution from github issues mentioned in one of the comments, I wanted to make it easier for SO users. Quote from the Github issues page:
easy workaround is to add the compilerOption "jsx": "preserve" (or
"jsx": "react" or "jsx": "react-native")
jsconfig.json:
{
"compilerOptions": {
"jsx": "react"
}
}
This is specific question about .js files. Not .ts files. With ts files i'm able to get it all working properly.
I made all the setup options for js files and it still doesn't work, if at all possible:
jsconfig.json in project root:
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"sourceMap": true,
"removeComments": true,
"pretty": true,
"allowSyntheticDefaultImports": true // false doesn't change anything
},
"files": [
"typings/index.d.ts"
]
}
I also installed typings for node, and all express standard typings.
Yet, on my app.js file:
import * as express from "foo"
var app = exfprdess();
doesn't trigger any underlined error. How to get proper behavior ?
Visual Studio Code, by default, doesn't lint your code (meaning it doesn't check for errors).
Visual Studio Code can, however, lint your code, you'll just have to configure something like ESLint or JSLint.