I started using react-native-animatable. It is similar to Animate.css with many pre-defined animations for React Native. Remembering all the different animation names is tricky, how do I set auto-complete in VSCode for the different animation names:
The project has a definition file. I am not working with Typescript but I guess auto-completion wouldn't mind, right? How do I set it up?
What I've tried so far:
I've added a file named tsconfig.json in the root:
{
"allowJs": true,
"compilerOptions": {
"noUnusedLocals": true,
"module": "commonjs",
"noImplicitAny": true,
"removeComments": true,
"preserveConstEnums": true,
"sourceMap": true
},
"files": ["typings/react-native-animatable.d"]
}
I have copied the 3rd party's definition to a directory named "typings".
Still no luck.
I'm pretty sure typings definition files end in .d.ts While I'm not sure what the exact problem or solution is this page - under the 'quick fix' heading may point you in the right direction.
I faced this issue in 16.11 react but by pasting three files in react folder in node_modules: which are index.d.ts and experimental.d.ts and global.d.ts. I got these from my old project which is 16.9 react.
Related
I have a Vue project. When I go into my VS Code settings, I see an extension called "Vetur". I believe Vetur is what takes care of all code formatting for me. Under settings, when I click into Vetur, it gives me a list of different formatters for JS, CSS, HTML, etc. as they appear within Vue files. Here's a picture:
Picture of Vetur settings
The default formatter set for most things is something called prettier.
However, when I go into settings (which takes me to a file called settings.json), I don't see the word "prettier" there at all! Instead, I see a bunch of settings for other formatters that weren't selected (such as js-beautify-html), and the closest thing to the word "prettier" is the word "prettyhtml".
In the dropdown list for HTML, I do see an option for "prettyhtml", but it warns me that it's deprecated. Here's a screenshot: prettyhtml shown as a dropdown option but says it's deprecated.
When I go into this settings.json, I see this part:
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_attributes": "force-expand-multiline"
},
"prettyhtml": {
"printWidth": 100,
"singleQuote": false,
"wrapAttributes": false,
"sortAttributes": false
}
}
Is "prettyhtml" the same thing as "prettier"?
If not, then why doesn't anything appear in settings.json for "prettier"? There are exactly zero string matches for the word "prettier" in settings.json.
This is all very confusing! Thanks.
In my Vue.js projects almost all the times I need this code snippet as a template.
<template>
<div>
</div>
<template>
<script>
export default{
data(){
return{
}
},
methods:{
},
created(){
}
}
</script>
<style scoped>
</style>
Is there a way to tell Visual Studio Code each and every time I create a file with the extension .vue to automatically add that snippet to the file?
Simply, when I create new file with a certain extension, the predefined template for that extension should automatically be added to the file.
There isn't, not natively. But there is an extension called File Templates for VSCode that allows you to create your own file templates and generate from them. But I think you'd benefit from making an extension to do just that and maybe even more.
In the meantime, you can use a snippet to generate this instead of having to copy paste.
Go to File > Preferences > User Snippets and choose Vue from the dropdown. Vue will only show up if you have installed an extension that supports this file type. In this case, I'd recommend Vetur, but you probably have it already.
Then just add this entry to your vue.json file:
"vuetpl" : {
"body": [
"<template>",
"\t<div>",
"\t\t$0",
"\t</div>",
"</template>",
"<script>",
"export default{",
"\tdata(){",
"\t\treturn{",
"\t\t\t",
"\t\t}",
"\t},",
"\tmethods:{",
"\t\t",
"\t},",
"\tcreated(){",
"\t\t",
"\t}",
"}",
"</script>",
"<style scoped>",
"</style>",
],
"prefix": "vuetpl",
"description": "Creates a new template."
}
Then, when you create a new .vue file, just type vuetpl and press tab to autocomplete, and you'll have this:
Of course, you can also use a Snippet Generator to make your own snippets.
This is being worked on now and is built-in to vscode v1.70 Insiders and may be in Stable v1.70 early August, 2022.
1. Make sure you haven't disabled this setting by setting it to hidden:
// Controls if the untitled text hint should be visible in the editor.
"workbench.editor.untitled.hint": "text", // "text" is the default
2. Make some snippets that will serve as templates for whatever languages you are interested in in a snippets file (here they are in a global snippets file):
"vue template": {
"isFileTemplate": true, // changing to this soon
"isTopLevel": true, // was this
"scope": "vue",
"prefix": "vueTemplate",
"body": [
"const a = 'vue template'"
],
"description": "vue template"
},
"javascript template": {
"isFileTemplate": true,
"scope": "javascript",
"prefix": "jsTemplate",
"body": [
"const a = 'javascript template'"
],
"description": "javascript template"
},
The isFileTemplate option is key here. Any snippet with this option will appear in the following workflows.
If you have the "scope": "someLangID here" set in the keybinding then vscode can and will automatically change the current editor's language to that language ID.
3. Create a new file:
a. with the command File: New Untitled File Ctrl+N
[the following option in the new file message start with snippet has been delayed and won't be in v1.70 Stable - the command SNippets: Populate From Snippet is working though.]
Then you will see the message at the top of the file as in this demo:
start with snippet
Clicking on that will show any snippets with that "isFileTemplate": true, set. Choosing one from the resulting QuickPick thaht opens up will input the snippet contents AND change the editor's language association to the scope value.
b. You can also modify an existing file to the snippet content and language by using the command (found in the Command Palette)
Snippets: Populate from Snippet
[This command workbench.action.populateFileFromSNippet does not have a default keybinding.]
As you can see in the demo, using this command will delete all the current contents of the file AND change the language association of that editor.
So making your initial snippets will probably be the hardest part, you might look into the snippet generator app.
The extension Auto Snippet does exactly that.
You only need to configure two things:
The snippet's name
A filename pattern or a language for when the snippet should be applied
Recommendation
The author has some very custom defaults, so as soon as you install it, modify its settings and remove those patterns that you won't need.
Otherwise, it will complain every time you create a file and doesn't find the snippet configured.
There is a pretty good plugin called "Snippet Creator" that makes creating snippets painless.
I wanted a quick "template" file that I could re-use. Copied the text, then used command "Create Snippet", and it was done in a couple of steps.
It could also be used to create the same Vue templates mentioned above. You can edit the snippet, insert your tab stops etc, just visit Code > Preferences > Configure User Snippets once created 🥳
Describe the bug:
Curly lines are displayed in the feature file even when step definitions are available and properly mentioned in the settings.json file
Go to step definitions and Peek Step definitions options aren't displayed
Note: I'm literally unable to get help from anywhere apart from creating an bug.
Expected behavior:
User should be displayed Curly lines only for steps which doesn't have step definitions and user should be able to Go to step definitions from feature files
Image of my Project structure & Issue:
Image of my settings.json:
Project Structure Sample:
-PROJECT NAME
-featureFiles
-features1.feature
-features1.feature
-stepDefinitions
-stepDefintions_1.ts
-stepDefintions_2.ts
-stepDefintions_3.ts
-pageObjects
-logs
-configFiles
-commonUtlities
-node_modules
-reports
-package.json
-ts-config.json
Settings.json file:
{
"cucumberautocomplete.steps": ["stepDefinitions/*.ts"],
"cucumberautocomplete.syncfeatures": "featureFiles/*feature",
"cucumberautocomplete.strictGherkinCompletion": true,
"cucumberautocomplete.strictGherkinValidation": true,
"cucumberautocomplete.smartSnippets": true,
"cucumberautocomplete.stepsInvariants": true,
"workbench.iconTheme": "vscode-icons"
}
Please assist me in resolving my issue or identifying, where I have gone wrong :(
Press Ctrl + , to open User Settings
Scroll down to Cucumber Auto Complete
On the right side you need to modify these settings (you can find 2 examples of how to do this on the extension page). In my case, I added the following:
Open a .feature file and right click any step, you should have Go To Definition and Peek Definition working.
Can you please tell me how to remove below message on VS code editor?
The attribute name of [ *ngIf ] must be in lowercase.
Above message shows on below code
<div *ngIf="isBornOn">
</div>
I think it has to do with the vscode-htmlhint plugin, try disable it.
If that removed the warning you can disable just that rule by setting attr-lowercase to false.
Read more about the configuration of this plugin here
In VSCode you can set the following settings to disable it.:
"htmlhint.options": {
"attr-lowercase": false
}
If don't want lose warning when use attributes that don't follow lower case rule. Instead of, you can define an attribute white list:
"htmlhint.options": {
"attr-lowercase": [
"*ngIf",
"ngIf",
"*ngFor",
"ngFor",
"ngSwitch",
"ngModel"
],
"doctype-first": false
},
Also can add doctype-first to avoid that message on every component.
Anyone looking to solve this from another IDE such as Eclipse or Codemix, simply create a file called .htmlhintrc place this in /<angular-project>/src/.htmlhintrc
and change the values as you see fit, mine are:
{
"tagname-lowercase": false,
"attr-lowercase": false,
"attr-value-double-quotes": true,
"doctype-first": false,
"tag-pair": true,
"spec-char-escape": true,
"id-unique": true,
"src-not-empty": true,
"attr-no-duplication": true,
"title-require": true
}
Re-open the tab if not automatically resolved or then restart the IDE.
Under VS Code - Extensions (left sidebar - box-shaped icon) - Disable this plugin or uninstall if required.
Then Reboot
I have configured the following TypeScript snippet in Visual Studio Code
"console.log": {
"prefix": "cl",
"body": [
"console.log();"
],
"description": "console.log()"
}
It doesn't work however, because there is already a snippet defined for the cl (class). How can I overwrite that snippet with mine? I'd like to use cl, because I have other IDEs configured the same way and would prefer not change my convention.
When you type cl a list of all the possible expansions of the cl snippet is shown and your snippet is probably around the bottom of the list. In order to access the snippet at the top of the list you can added the following to your settings.json
// Place your settings in this file to overwrite the default settings
{
"typescript.useCodeSnippetsOnMethodSuggest": true,
"editor.snippetSuggestions": "top",
"editor.tabCompletion": true
}
Here notice the editor.snippetSuggestions. This is the setting which defines the sorting of the autocomplete list which appears when you type your snippet's abbreviation. By default it is bottom which is why your snippet appears at the end of the list.