Custom Code Snippets not showing up in intellisense in visual studio code - visual-studio-code

I am trying to add a custom code snippets for typescript react. But after adding it, it is not showing in intellisense or in Insert Snippet command window. I performed below steps:
Creating the code snippet. File > Preferences > User Snippets > Typescript React. My json:
"React Component": {
"prefix": "myreactc",
"body": [
"import * as React from "react";"
],
"description": "Adds a react component."
}
Updated following setting:
"editor.tabCompletion": true
Create a new blank TSX file and type: "myreactc" but nothing shows up in intellisense.
I have also restarted visual studio code, but no luck.
Visual Studio Code Details:
Version 1.14.2
Commit cb82febafda0c8c199b9201ad274e25d9a76874e
Date 2017-07-19T23:34:09.706Z
Shell 1.6.6
Renderer 56.0.2924.87
Node 7.4.0
Any help?

I realized that the code was commented :) The default template has the code commented, i updated the code but forgot to uncomment the code.

I was stupidly changing the snippet name and not the snippet prefix
"For Loop": {
"prefix": "my name for intellisense",
"body": [

Related

Why does vscode-eslint use a different "root" than ESLint?

Everytime I open my project folder in Visual Studio Code, I get an error on the first line of each file. It cannot find my tsconfig.json file because it is looking in the directory I opened VS Code, not where my eslint.json is. I have a functions folder in my root project where the ESLint config is.
Here is part of it:
"parserOptions": {
"ecmaVersion": 2019,
"project": ["./tsconfig.json", "./tsconfig.dev.json"],
"sourceType": "module"
},
When I run my lint command eslint "src/*.{ts,js}", it works perfectly and shows the correct warnings. This means that the VS Code plugin dbaeumer.vscode-eslint parses the .eslintrc.json config differently than what it should.
If I change the project to ["./functions/tsconfig.json", "./functions/tsconfig.dev.json"], then VS Code stops giving the error, but when I run ESLint, it tries to find it in <path/to/project>/functions/functions/tsconfig.json going in the functions directory twice.
Is this a VS Code bug, a dbaeumer.vscode-eslint bug, or am I doing something wrong? What can I do to fix the error?
You can just add this "eslint.workingDirectories": [{ "mode": "auto" }] to your VS Code settings.json.
It should make the error go away, but it can have unintended side effects.
More Info: https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint#settings-options

java.lang.ClassNotFoundException: Cannot find implementation for MyMapper in Visual studio code

Class not found exception in Visual studio code because vs-code debug takes output class files form bin directory like eclipse but i am using GRADLE for build so MapperImpl.java which is implementation files in mapper are created in the build folder i don't know how to solve the issue i tried to change the classpath all the solutions i tried but nothing working please i need your help
I am also posting the vs code file launch.json
{
"type": "java",
"name": "Debug (Launch)-Application<RestApi>",
"request": "launch",
"mainClass": "ae.org.nge.Application",
"projectName": "RestApi",
"vmArgs": "-DngeConfig=C:/Users/Manoj.Dhayalan/source/myapp/Application/config/myapp-config.properties -Dserver.port=8081 -Dspring.profiles.active=dev"
}
I don't use Visual Studio Code but I managed to change the location of generated class file by putting this lines into my build.gradle file:
compileJava {
options.setAnnotationProcessorGeneratedSourcesDirectory(file("$projectDir/src/main/generated"))
}
This way gradle will generate MyMapperImpl in src instead of build folder and it should be also recognized by VS Code.

Configuring Hy to run on VSCode

I'm trying to debug Hy code in Visual Studio Code. I have downloaded the hy-mode theme and it works great. There's only one problem. The hy-mode theme disables breakpoints.
I can add a breakpoint to my Hy code by switching to a totally unrelated language (like CoffeeScript) and then my Python debugger works. But I can't add breakpoints when I'm in hy-mode.
I debug code by writing a Python file that imports a Hy file. When I run the Python pdb debugger on the Python file, pdb debugs the Hy code just fine. But I can't add breakpoints to the Hy file when I'm have hy-mode active.
Is there a way to edit a Visual Studio Code theme so that to allow the insertion of breakpoints?
I found a solution to this problem. By adding "hy" to the languageIds list in the following files I can get Hy files to display breakpoints.
./ms-python.python-2019.8.30787/package.json
ms-python.python-2019.8.30787/out/client/package.json
"debuggers": [
{
"type": "python",
"label": "Python",
"languages": [
"python"
],
"enableBreakpointsFor": {
"languageIds": [
"python",
"html",
"jinja",
"hy"
]
},

V S code V1.31 emmet intellisense not working with Python/Django Extensions

I installed Visual Studio Code 1.31.0 recently and also installed the python and django extensions. When I'm tying to create new HTML file, and typing "html" it was not showing with the emmet responses and after quite a bit of struggle, when I uninstalled python and django extensions, things are back to normal.
Any help on how to get emmet working with python and django extensions installed?
Django extension for Visual Studio Code
as explained in the descriptionof the above link, you will have to enter the following code in your settings file.
"files.associations": {
"**/templates/*.html": "django-html",
"**/templates/*": "django-txt",
"**/requirements{/**,*}.{txt,in}": "pip-requirements"},
"emmet.includeLanguages": {"django-html": "html"},
Open the settings.json as below path:
%APPDATA%\Code\User\settings.json
Edit the file as below:
{
"files.associations": {
"**/*.html": "html",
"**/templates/**/*.html": "django-html",
"**/templates/**/*": "django-txt",
"**/requirements{/**,*}.{txt,in}": "pip-requirements"
},
"workbench.editorAssociations": [
{
"viewType": "jupyter.notebook.ipynb",
"filenamePattern": "*.ipynb"
}
],
"emmet.includeLanguages": {
"django-html": "html"
},
"emmet.excludeLanguages": [
"markdown"
]
}
its simple just go to settings-> Emmets and in emmets you will find include library option just click on that in language write django-html and in value add html
BOOM IT IS DONE.
On vs code, open settings, go to => Extensions => EMMET => scroll down and locate on the ( INCLUDE LANGUAGES ) => click on (ADD ITEM ). the first input which is the ( KEY ) type django-html and the second input which is the ( VALUE ), type html

VSCode: Is it possible to suppress experimental decorator warnings

In VSCode, I get the error:
"Experimental support for decorators is a feature that is subject to change in a future release. Specify '--experimentalDecorators' to remove this warning."
I can add the --experimentalDecorators flag to my tasks.json file to remove this error on build, but I can't seem to remove it from my intellisense or error list when I load VSCode.
Is there a way to do this?
I was having this same error. I added the following tsconfig.json file to my project root, restarted VSCode and it finally went away:
{
"compilerOptions": {
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"module": "amd",
"target": "ES6"
}
}
UPDATE:
I've noticed that sometimes VS Code will not suppress this warning until you add a "files" array in your tsconfig.json, even an empty one will work. For me this has worked every single time now, if the message does not disappear, try the following:
{
"compilerOptions": {
...
},
"files": [],
"exclude": [
"node_modules"
]
}
Perhaps this will explain why everyone has mixed results?
VSC is by default looking at its own TS library and definition. If you're using a different version (which is very likely) you should point VSC to look for that versions definition.
In my settings.json file, i have the following set up:
// Place your settings in this file to overwrite default and user settings.
{
"typescript.tsdk": "node_modules\\typescript\\lib"
}
I believe you can set this for either your User Settings or your Workspace Settings. So you can do a one time configuration in your User Settings or just for one project/workspace. This works if you have your typescript installed locally in the specified folder - which i believe is the default nodes module folder.
To edit your settings go to File/Preferences/User Setting or File/Preference/Workspace Settings.
UPDATE: Visual Studio Code just released a new version with better support for different versions of typescript. Check it out here: https://code.visualstudio.com/updates#_languages
I've to add the following in the settings.json file of vscode to remove the warning.
"javascript.implicitProjectConfig.experimentalDecorators": true
VSCode -> Preferences -> Settings
You could do it the hard way by deleting the lines which create the error in %code%\resources\app\plugins\vs.language.typescript\lib\tsserver.lib.
Look for the following code and delete it
if (!compilerOptions.experimentalDecorators) {
error(node, ts.Diagnostics.Experimental_support_for_decorators_is_a_feature_that_is_subject_to_change_in_a_future_release_Specify_experimentalDecorators_to_remove_this_warning);
}
Struggling with this across two different Angular 2 final release projects, this is my solution.
tsconfig.json in the src fold.
{
"compilerOptions": {
"experimentalDecorators": true
}
}
AND
Add this setting to File->Preferences->User settings
"typescript.tsdk": "node_modules\\typescript\\lib"
As other answers pointed out, your Visual Studio Code needs to find the tsconfig.json file.
I had the same problem. And it's mostly because I didn't realize the project structure.
(Hint: Read the text from top to bottom in the picture below).
I had confused the tsconfig.json with the tsconfig.app.json.
And I had opened the wrong folder in Visual Studio. As a result, the tsconfig.json was not in scope.
Simply opening the right root folder (i.e. the project folder, one level higher than the src.) solved the problem for me.
This helped me with React JS files (VSCode Version 1.9.1).
1) Put into tsconfig.json:
{
"compilerOptions": {
"experimentalDecorators": true,
"allowJs": true
}
}
2) Restart VS Code.
Note: as Tim mentioned below, you need to add the tsconfig.json even if your not using TypeScript.
Source: https://ihatetomatoes.net/how-to-remove-experimentaldecorators-warning-in-vscode/
You can use "typescript.tsdk" in setting.json to change specific folder path containing tsserver.js and lib.ts files used by VSCode.
See this example: Can I use a relative path to configure typescript sdk?
note: You find setting.json in File > Preferences > User Settings.
If you use Grunt (grunt-ts), you must also add "experimentalDecorators: true" as option in the file gruntfile.js .
Your file should look something like this at the end:
module.exports = function(grunt) {
grunt.initConfig({
ts: {
default : {
src: ["**/*.ts", "!node_modules/**"]
},
options: {
experimentalDecorators: true
}
}
});
grunt.loadNpmTasks("grunt-ts");
grunt.registerTask("default", ["ts"]);
};
For more information you can read documentation on github https://github.com/TypeStrong/grunt-ts#experimentaldecorators
In Visual studio code 1.3.1 my fix is in C:\Program Files (x86)\Microsoft VS Code\resources\app\extensions\typescript\server\typescript\lib\tsserver.js and comment out or delete the line.
if (!compilerOptions.experimentalDecorators) {
error(node, ts.Diagnostics.Experimental_support_for_decorators_is_a_feature_that_is_subject_to_change_in_a_future_release_Specify_experimentalDecorators_to_remove_this_warning);
}
I was having same error i figure it out as this was i name component file extension as .js it should be .ts
Even when opening VSCode at the right level within your project you might still need an extra tsconfig file in your root. I now have a tsconfig in my project root (only containing php index and folders), ts folder (legacy typescript classes) and my src folder (vue components).
Don't forget to close the folder and to restart VSCode.
Please check you oppened in your VS Code the folder of the entire project and not only the src folder, because if you open only the src, then ts.config.json file will not be in scope, and VS will not recognize the experimental decorators parameters.
In my case this fixed all the problem
I already had experimental decorators enabled in tsconfig.json, so I was a bit baffled until I found this thread on GitHub where someone says to check the settings in VS Code.
So I went to File --> Preferences --> Settings and searched for experimental decorators and checked both of these settings:
Here are the details of my version of VSCode:
Version: 1.52.1 (user setup)
Commit: ea3859d4ba2f3e577a159bc91e3074c5d85c0523
Date: 2020-12-16T16:34:46.910Z
Electron: 9.3.5
Chrome: 83.0.4103.122
Node.js: 12.14.1
V8: 8.3.110.13-electron.0
OS: Windows_NT x64 10.0.18363
Below answer for VSCode version 1.60.12
press "ctrl" + ",".
type "settings.json".
see this image to click on settings..
paste "js/ts.implicitProjectConfig.experimentalDecorators":true -->
See my settings for reference