I'm getting unwanted autocomplete suggestions and I'm not sure how to disable them.
Example of suggestions
Path of which the suggestions are pulled
C:\Program Files (x86)\Microsoft VS Code\resources\app\extensions\node_modules\typescript\lib\lib.es6.d.ts
settings.json (part)
"files.exclude": {
"/**/node_modules": true,
"/**/bower_components": true,
"**/.git": true,
"**/.svn": true,
"**/.hg": true,
"**/CVS": true,
"**/.DS_Store": true,
".vscode": true
},
Any ideas to disable this would be awesome!
RTCIceCandidatePairChangedEvent is a dom type. Dom typing suggestions are included by default for JS and TS, along with types for the the standard JavaScript library.
To explicitly control which typings are included, create a jsconfig.json file that sets lib:
{
"compilerOptions": {
"lib": ["es6"]
}
}
The above config means that only the es6 standard library typings will be included. Here's more info on the lib setting
Related
I've installed prettier on my vscode and do all the settings for that. But it is still not working.
Settings I've applied: default formatter prettier, format on save. But it still not working. Please help me.!!
press shift + alt + f together
if its open select folder then choose the folder you want for prettier
if gives you 2 options prettier or any other things then hit prettier
or if you using Javascript and its frameW n libs then create file .prettierrc.js and then add those commends
module.exports = {
trailingComma: "all",
tabWidth: 4,
singleQuote: "avoid",
};
good luck
I can't comment yet so here's my best try at an answer:
Prettier mainly supports these languages according to their page: JavaScript · TypeScript · Flow · JSX · JSON CSS · SCSS · Less HTML · Vue · Angular GraphQL · Markdown · YAML Make sure you're formatting one of those languages for best results.
If Editor: Format On Save Mode is set to modifications then you may not be able to go to an existing file and instantly format all of it.
If none of that helps I'm stumped and recommend looking at Why Prettier does not format code in VSCODE? if you haven't already
Try this :
Search for 'Prettier Path' in settings > select 'Edit in settings.json' and add the following config :
{
"editor.minimap.enabled": false,
"editor.fontSize": 12,
"editor.formatOnSave": true,
"editor.tabSize": 2,
"liveServer.settings.donotShowInfoMsg": true,
"editor.wordWrap": "on",
"emmet.triggerExpansionOnTab": true,
"emmet.showSuggestionsAsSnippets": true,
"editor.snippetSuggestions": "top",
"[javascript]": {
// "editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"editor.formatOnPaste": true
},
"workbench.colorTheme": "Monokai",
"window.zoomLevel": 0,
"editor.columnSelection": false,
"explorer.compactFolders": false,
"typescript.updateImportsOnFileMove.enabled": "always",
"javascript.updateImportsOnFileMove.enabled": "always",
"liveServer.settings.donotVerifyTags": true,
"prettier.prettierPath": "/usr/local/lib/node_modules/prettier"
}
Make sure prettier is installed at the given path : "prettier.prettierPath": "/usr/local/lib/node_modules/prettier"
You can make prettier the default also by uncommenting the code : "editor.defaultFormatter": "esbenp.prettier-vscode"
It has my custom settings of visuals, so review those and then set, for beginners try pasting as-is!
VSCode does not recognize the scss that I include within a svelte file. It thinks they are css styles and, the first nesting css that it meets, gives me error.
I tried to disable the validation of the css in the settings through but it doesn't seem to have any effect: "css.validate": false,
The svelte application works correctly, either by launching it locally or by compiling the bundle for production (it's not a problem of my code).
It's just a problem with how VSCode controls my styles. For this problem, most of my svelte components seem wrong even if they are not really.
To compile styles like scss I include the attribute type="text/scss" to the tag:
<style type="text/scss">
All errors have code: "css-syntax-error".
I think that the reason is because VS Code doesn't recognize that it's SCSS and not CSS.
I have these extensions for sass in svelte:
SCSS IntelliSense
Beautify css/scss/sass/less
Live SASS Compiler
Svelte plugin 0.9.3
My VSCode settings:
{
"svelte.language-server.runtime": "......",
"scss.lint.important": "warning",
"editor.formatOnPaste": true,
"css.completion.triggerPropertyValueCompletion": false,
"css.completion.completePropertyWithSemicolon": false,
"css.lint.argumentsInColorFunction": "ignore",
"css.lint.hexColorLength": "ignore",
"css.lint.duplicateProperties": "warning",
"editor.suggestSelection": "first",
"vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
"workbench.colorTheme": "Material Theme Darker",
"css.validate": false,
"editor.codeActionsOnSave": {},
"git.enableSmartCommit": true,
"css.fileExtensions": [
"css",
"scss"
],
"beautify.options": {
},
}
From the error it seems that the preprocessing of your svelte file failed. You need a svelte.config.js at the root of your project. The Plugin uses this to preprocess files.
If you use this preprocessor plugin for svelte https://github.com/kaisermann/svelte-preprocess , setting it up is as easy as this:
svelte.config.js:
const sveltePreprocess = require("svelte-preprocess");
module.exports = {
preprocess: sveltePreprocess(),
};
My project has eslint and it's own eslint.json file with its rules, I want to either use that my global eslint or override the project level one and just use my global eslint settings, is there a way to do that.
I currently have the following settings in my VSC
"eslint.enable": true,
"eslint.run": "onSave",
"eslint.autoFixOnSave": true,
"eslint.trace.server": "messages",
"eslint.alwaysShowStatus": true,
"eslint.options": { "configFile": "/Users/almog/.eslintrc.json" },
you can initiate eslint in your required folder by using eslint cli command elsint --init and follow the instructions and then specify the eslintrc (eg: .eslintrc.js)
setup file path in vscode "eslint.options": { "configFile": "C:\\Users\\user66\\.eslintrc.js" }
Sometimes when I startup VSCode and I save an JS file, everything gets messed up.
example
From:
To:
On save
What I found out:
When I change a VSCode User setting (something related to the prettier plugin | anything (I normally change the prettier.eslintIntegration but it could be that any change in the setting resolves it)) it stops breaking on save.
Possible related environment details
// Part of .eslintrc
{
parser: 'babel-eslint',
extends: ['airbnb', 'prettier'],
plugins: ['prettier'],
rules: {
'prettier/prettier': 'error'
}
...
}
// .prettierrc.yml
printWidth: 80
tabWidth: 4
useTabs: false
semi: false
singleQuote: true
trailingComma: es5
bracketSpacing: true
jsxBracketSameLine: false
arrowParens: always
// Part of my VSCode 'User Settings' file
"javascript.format.enable": false,
"javascript.validate.enable": false,
"prettier.eslintIntegration": true,
"typescript.format.enable": false
// Possible related modules from my package.json
"babel-eslint": "^8.2.1",
"eslint": "^4.16.0",
"eslint-config-airbnb": "^16.1.0",
"eslint-config-prettier": "^2.9.0",
"eslint-import-resolver-webpack": "^0.8.4",
"eslint-plugin-import": "^2.8.0",
"eslint-plugin-jsx-a11y": "^6.0.3",
"eslint-plugin-prettier": "^2.6.0",
"eslint-plugin-react": "^7.5.1",
"prettier-eslint": "^8.8.1",
VSCode Extension suspects:
dbaeumer.vscode-eslint
esbenp.prettier-vscode
If any other (debugging) information needs to be provided, please shoot.
For me the issue was that the Beautify extension performed the formatting in .js files, and it didn't know how to handle JSX syntax.
The solution was to prevent Beautify from formatting Javascript files.
In order to do so you need to add the following setting to your User Settings in VSCode (reachable using ctrl+shift+p and selecting Preferences: Open User Settings):
"beautify.ignore": [
"**/*.js"
]
I had similar issues using ESLint and Prettier together in VS Code. After trying dozens of ways, the following configuration works for me.
ESLint and Prettier are installed globally on my machine.
I am using these extensions:
https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
My .eslintrc.json file looks like this:
{
"env": {
"browser": true,
"commonjs": true,
"es6": true
},
"extends": ["eslint:recommended"],
"parserOptions": {
"sourceType": "module"
},
"rules": {
"indent": ["error", 4],
"quotes": ["error", "single"],
"semi": ["error", "always"],
"no-console": "off"
}
}
In your VS Code, please go to Preference > Settings > User Settings and add the following lines:
"editor.formatOnSave": true,
"prettier.tabWidth": 4,
"prettier.eslintIntegration": true,
"prettier.stylelintIntegration": true
I am not using eslint-config-prettier or eslint-plugin-prettier and everything works fine for me.
Important: Please make sure you do not have any other automatic formatter (other than Prettier) extension installed.
When using VSCode, Prettier and ESLint the same time you may have different conflicting rules.
Setting rules manually in VSCode and ESLint may have no effect, but try to do that first. Also, Prettier settings may be saved in its own config file - .prettierrc or some like that.
If no effect, then check these:
In dev dependencies is proper version installed [eslint-config-prettier][1]
If you've used React/Vue/other-3d-party tool or source, you have to check that you're use NOT #vue/eslint-config-prettier version (see package.json and lock files)
In eslintrc file there is extends: ['prettier']. Same as the previous check there no library depended version specified.
I had this issue after a VSCode update. I downgraded to the previous version and Prettier worked normally again.
The issue for me is that I had both Prettier and JS-CSS-HTML-formatter installed in VS Code. As soon as I uninstalled JS-CSS-HTML-formatter the issue went away.
I had the same issue. I uninstalled the extension and it solved the problem.
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.