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
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
}
}
I need to change the status of useTaobaoRegistry to false but I don't know how.
{
"useTaobaoRegistry": true,
"presets": {
"default": {
"useConfigFiles": false,
"plugins": {
"#vue/cli-plugin-babel": {},
"#vue/cli-plugin-pwa": {},
"#vue/cli-plugin-router": {
"historyMode": true
},
"#vue/cli-plugin-vuex": {},
"#vue/cli-plugin-eslint": {
"config": "standard",
"lintOn": [
"save"
]
},
"#vue/cli-plugin-unit-jest": {}
},
"cssPreprocessor": "dart-sass"
}
}
}
I tried doing vue config -e but it only showed :
Could not open .vuerc in the editor.
Unable to open '/home/prabin/.vuerc' null
Try setting the EDITOR env variable. More info: https://github.com/yyx990803/launch-editor
I visited the site but I understood nothing.
Any help would be nice !
I guess you have had your answer till now, but there is no concrete answer answer anywhere, specially for windows user. So, it will be helpful for future stackflowers.
Problem
You are getting the problem because there is no Default App to open such type of file extension. For example, we have Chrome, Firefox, IE for .HTML file extensions but the .vuerc file extension is not associated with any default app.
Solution
To make this work, first of all, you need to locate the file which is in your default user directory.
In windows C:\Users\{Username-Path}. Scroll down below, you will see .vuerc file. Double click on it and set you editor as Default App to open and open it.
After that, when you run, vue config --edit in terminal, the file will be opened in your predefined Editor. From there, you can make your desired changes.
Please try to change this "useTaobaoRegistry": false in ~/.vuerc file.
Right clic on the .vuerc file and choose : Open with > an "in-the-list" editor
Hope this will help you ;)
I followed this doc to add CSS reset to my app.
https://create-react-app.dev/docs/adding-css-reset/#indexcss
But it showed this message:
"stylelint": {
"extends": "stylelint-config-recommended",
"rules": {
"at-rule-no-unknown": null
}
How to fix this problem?it is annoying...
To fix this warning you just need to add this line to.vscode/settings.json inside your project (you can create this file if it doesn't already exist):
{
"css.lint.unknownAtRules": "ignore"
}
Source: https://create-react-app.dev/docs/adding-css-reset/#indexcss
For VS Code -
To make the VS Code recognise this custom CSS directive, you can provide custom data for VS Code's CSS Language Service as mentioned here - https://github.com/Microsoft/vscode-css-languageservice/blob/master/docs/customData.md.
Create a CSS custom data set file with the following info. Place it at location .vscode/custom.css-data.json relative to the project root.
{
"version": 1.1,
"properties": [],
"atDirectives": [
{
"name": "#import-normalize",
"description": "bring in normalize.css styles"
}
],
"pseudoClasses": [],
"pseudoElements": []
}
Now, if you don't have already, create a .vscode\settings.json file relative to project root. Add a field with key "css.customData" and value as the path to custom data set. For example,
{
"css.customData": ["./.vscode/custom.css-data.json"]
}
Now, you will no longer get "Unknown at rule" warning. When you hover over "#import-normalize", you will see the description you set for it in custom.css-data.json
#import-normalize is a non-standard at-rule. From the rule's documentation:
This rule considers at-rules defined in the CSS Specifications, up to and including Editor's Drafts, to be known.
However, the rule has an ignoreAtRules secondary option for exactly this use case, where you can list the non-standard imports you are using.
For example, in your package.json:
{
"stylelint": {
"extends": "stylelint-config-recommended",
"rules": {
"at-rule-no-unknown": [true, {
"ignoreAtRules": ["import-normalise"]
}]
}
}
}
Or within your .stylelintrc file:
{
"extends": "stylelint-config-recommended",
"rules": {
"at-rule-no-unknown": [true, {
"ignoreAtRules": ["import-normalise"]
}
}
}
I've modified the settings.json file, but it doesn't work.
Here it is:
{
"eslint.autoFixOnSave": true,
"vetur.format.defaultFormatter.html":"js-beautify-html"
}
In your settings.json you should have:
editor.formatOnSave: true
[vue]: {"editor.defaultFormatter": "octref.vetur"} if you have several formatters registered for .vue files you need to specify which one to use (otherwise format on save will not know which one to use and it will default to do nothing. This will select "Vetur" as the default.
"vetur.format.defaultFormatter.html": "js-beautify-html" to tell Vetur how to format the part inside <template> tags:
{
"editor.formatOnSave": true,
"vetur.format.defaultFormatter.html": "js-beautify-html",
"[vue]": {
"editor.defaultFormatter": "octref.vetur"
}
}
Note: How do you know that there are several formatters registered for .vue? If when you use the Format Document action you get the dialog There are multiple formatters for 'Vue' files. Select a default formatter to continue then it means that you have more that one formatter registed for '.vue' files.
use plugin:vue/recommended replace plugin:vue/essential
// .eslintrc.js
module.exports = {
extends: [
'plugin:vue/recommended',
'#vue/standard'
]
}
enable eslint fix on save
// .vscode/settings.json
{
"eslint.validate": [
"javascript",
"html",
"vue"
],
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true,
"source.fixAll.stylelint": true
},
"vetur.validation.template": false
}
To get the auto-save of templates to work using the combination of ESLint and Vetur, I used the following combination of VS Code settings:
{
"eslint.validate": [
"vue",
"html",
"javascript",
"typescript"
],
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"editor.formatOnSave": true,
"vetur.format.defaultFormatterOptions": {
"prettier": {
"singleQuote": true
}
}
}
The "editor.formatOnSave": true did the trick for me. This lead to the problem of converting single quotes to double quotes in the script section, therefore I added the prettier singleQuote config as well.
My answer is just loosely coupled to the question but as this question is the top result for googling "vetur auto format not working" I would like to add a possible solution to that.
My template had the lang attribute set like this <template lang="">. After removing the attribute auto formatting started to work again.
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"