I moved to VSCode from ST3 about 6 or 7 months ago now and overall am loving it. But I'm really struggling with inconsistencies in how Emmet/VSCode expands text...
For example: (these examples are as per the cheat sheet)
fl should give me float:left, but instead i get flex: gif
m:a should give me margin:auto - although since ST3 i've always used m- for this. However in VScode: I get max-block-size: gif
ttu should give me text-transform:uppercase, but instead I get text-underline-position:
p20-40 should give me padding: 20px 40px but in this case, nothing happens - doesn't recoginize it at all
w100p should give me width:100% but again, doesn't even recognize it <-- probably the most annoying one because I use this so often.
and even HTML borks out quite often: .div-class becomes .div-class<?php <-- no idea whats going on here... gif
It almost seems that VSCode has its own built-in Emmet, which is always conflicting with actual Emmet. I'll be the first to admit that it might be a conflicting option in my settings.json, so here is my settings file:
{
"editor.tabSize": 2,
"editor.minimap.enabled": false,
"editor.acceptSuggestionOnEnter": "smart",
"editor.wordBasedSuggestions": false,
"editor.quickSuggestions": {
"other": true,
"comments": false,
"strings": true
},
"editor.tabCompletion": true,
"editor.renderWhitespace": "boundary",
"editor.snippetSuggestions": "top",
"editor.occurrencesHighlight": false,
"editor.selectionHighlight": false,
"editor.renderIndentGuides": true,
"editor.autoIndent": true,
"php.suggest.basic": false,
"php.validate.executablePath": "/usr/local/php5/bin/php",
"workbench.colorTheme": "Bimbo Theme",
"workbench.iconTheme": "vs-seti",
"workbench.startupEditor": "none",
"workbench.editor.tabCloseButton": "left",
"workbench.commandPalette.preserveInput": true,
"workbench.tips.enabled": false,
"window.zoomLevel": 0,
"git.enableSmartCommit": true
}
I have removed settings relating to font sizes and themes etc.
Other Info:
VSCode Version 1.15.1 (1.15.1)
Extensions
Would really appreciate it if someone who isn't experiencing these issues could share their settings file so I can fix my frustration and carry on loving VSCode?
Thanks :)
That's because Emmet is interfering with autocomplete. Try typing any of these commands and execute from command palette Emmet: Expand Abbreviation.
You can remap keybinding for emmet command editor.emmet.action.expandAbbreviation
You can disable autocomplete for css (to show autocomplete when needed Trigger Suggest Ctrl+Space)
"[css]": {
"editor.quickSuggestions": {
"other": false,
"comments": false,
"strings": false
}
}
From version 1.16 August 2017 you can move emmet snippets on top and still have autocomplete:
"emmet.showSuggestionsAsSnippets": true,
"editor.snippetSuggestions": "top"
Related
Prettier in VS Code is great, except in this case where it seems to make things less readable. Here's an example of prettier's wrapping behavior in a Vue template file:
Notice the opening tag's end bracket is placed as start of second line, and closing tag is split between end of line 2 and 3. In my mind, this is more pretty:
Now the tags are complete on their own lines and the content is alone on line 2.
I've been unable to find a way to configure this in the prettier docs. Any ninjas know how?
Try to set htmlWhitespaceSensitivity property to ignore in your prettier config.
I agree your opinion. This Linter rule will help you.
eslint-plugin-vue/html-closing-bracket-newline.md at master ยท vuejs/eslint-plugin-vue
I setting up rules in .eslintrc.js below.
"vue/html-closing-bracket-newline": [2, { multiline: "never" }]
and I setting up .vscode/setting.json below
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"editor.formatOnSave": true,
"[javascript]": {
"editor.formatOnSave": false
},
"[vue]": {
"editor.formatOnSave": false
}
}
Issue:
-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
Expected behavior:
User should be displayed Curly lines only for steps which doesn't have step definitions
User should be able to Go to step definitions from feature files using "Go to Step definition" option on right click
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",
"files.autoSave": "afterDelay",
"cucumberautocomplete.customParameters": [
]
}
My Project structure:
-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
So this works for me. My settings.json file lives in the .vscode folder, which sits in the folder that I open in vscode (see image). The cucumberautocomplete.steps value is relative to this same folder.
I had the same problem. And, like you, I tried many variations of path.
Finally, only these settings worked for me:
"cucumberautocomplete.steps": [
"**/*.rb"
],
"cucumberautocomplete.syncfeatures": "**/*.feature",
"cucumberautocomplete.strictGherkinCompletion": true,
"editor.quickSuggestions": {
"other": true,
"comments": false,
"strings": true
}
I am using Visual Studio Code with a React Native project. ESLint is used to check the stuff specified in the .prettierrc.js.
When something isn't correct I get a hint like this:
Instead of getting these notifications and right clicking on them, selecting Fix this prettier/prettier problem, I want the problems to be fixed either automatically or using a shortcut combination. How can I configure that? I am currently using pure JavaScript, no Typescript.
Edit/create .vscode/settings.json so it will contain
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
}
Fixes issues on save.
Thanks for #jonrsharpe! Just want to add my few cents.
Go to settings.json file:
Windows %APPDATA%\Code\User\settings.json
macOS $HOME/Library/Application Support/Code/User/settings.json
Linux $HOME/.config/Code/User/settings.json
Add there:
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
}
Restart VSCode
Enjoy coding!))
UPDATE
While on Mac the solution above worked for me, on Windows to make it works I had to add following to settings.json :
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true,
"source.fixAll": true
},
"eslint.autoFixOnSave": true
When typing a style property name, the first option is almost always just the text I've typed already.
I can't find the setting to turn that off. (if there is one?) In my screenshot, it should list font-size as the first option. My editor scope is a vuejs single file component with stylus as the language.
In my settings I've done:
"editor.snippetSuggestions": "top",
"emmet.syntaxProfiles": {
"vue-html": "html",
"vue": "html"
},
"emmet.includeLanguages": {
"vue-html": "html",
"vue": "html"
},
I've also tried these to no avail:
"emmet.showExpandedAbbreviation": "never",
"emmet.showAbbreviationSuggestions": false
I'd like to use the es6-module-loader polyfill with the "module" tag in the browser: https://github.com/ModuleLoader/es6-module-loader#module-tag
It works by traversing all the files imported, looking for import/export tags and transpiling them. Traceur is the default due to babel no longer supporting dynamic, in-browser use.
The problem is that traceur transpiles all es6 features, while I want to transpile only the import/export statements due to good es6 browser support now (Canary is > 95% es6 complete!).
I tried turning off all the options that looked right, see below, but got lots of odd errors. I have not yet tried using the earlier babel 5.x in-browser for transpiling.
Is there any simple way to to get <script src="module"> working? I presume es6-module-loader is the best approach but any suggestion appreciated! A better set of traceur options? Try babel 5.x?
System.traceurOptions = { arrowFunctions: false, blockBinding: false, classes: false, computedPropertyNames: false, defaultParameters: false, destructuring: false, forOf: false, generators: false, numericLiterals: false, propertyMethods: false, propertyNameShorthand: false, restParameters: false, spread: false, symbols: false, templateLiterals: false, unicodeEscapeSequences: false, unicodeExpressions: false }