Cspell (Code Spell Checker) extension for Visual studio code is not working in html.
VS Marketplace Link: link
Probably something is not correct in my config:
"cSpell.languageSettings": [ { "languageId": "*", "includeRegExpList": [ "CStyleComment" ] }, ]
I wrote "*" in my config to make it work with every language but it dint work.
Related
I am trying to enable intelli-sense when I am editing the settings.json of the Windows Terminal. When this file is open auto-complete mostly does not work. I can seemingly get some suggestions, but it definitely does not include everything in the schema. For example, If i go to add a new command, man listed in schema , like 'newTab' to do pop up as possible options, unlike in this video: https://www.youtube.com/watch?v=NfgAOxfv0QU
schema is "https://aka.ms/terminal-profiles-schema",
I see an "unable to resole schema. Click to Retry" error in the bottom tray of VSCode. I can click to retry but nothing happens.
the $schema property has a squiggle underneath it that says "Draft 2019-09 schemas are not fully supported"
my settings.json looks like this (the default i think)
{
"json.schemas": [
{
"fileMatch": [
"/myfile"
],
"url": "schemaURL"
}
],
"[json]": {
"editor.quickSuggestions": {
"strings": true
},
"editor.suggest.insertMode": "replace"
}
}
More specifically, I DO get suggestions from the schema here:
"profiles":
{
"list":
[
{
"guid": "{574e775e-4f2a-5b96-ac1e-a2962a402336}",
"hidden": false,
"name": "PowerShell",
"source": "Windows.Terminal.PowershellCore",
"colorScheme": "Campbell Powershell",
"padding": "8, 8, 8, 8" //suggestions work here
},
But NOT here:
"actions":
[
{"command": "xxx", "keys":"zzz"} // no completion suggestions here
]
In neither case do I see squigglies under properties that are not in the scheme (e.g. if I mistype padding above)
It appears you're facing a known issue which has been raised here https://github.com/microsoft/vscode/issues/98724. This issue is still open.
A duplicate issue contains a work around however, which may be worth trying - https://github.com/microsoft/terminal/issues/7683.
"https://github.com/microsoft/terminal/raw/e504bf21402bca34e45863370aad9fefd543c292/doc/cascadia/profiles.schema.json". That was the last version before the schema was upgraded to draft 2019-09. If you change the schema URL like that, I think it will avoid the Draft 2019-09 schemas are not yet fully supported warning in Visual Studio Code...
Further down a user reports the workaround was successful for them.
Consider voting the GitHub issue!
When I copy HTML snippets into JSX I often get errors because self closing tags in HTML can be unclosed like <hr> but in JSX they must always be closed like <hr />, is there a plugin or setting that can automatically fix these for me?
I ended up solving it by doing a regex find and replace on all void elements.
find: <((area|base|br|col|command|embed|hr|img|input|keygen|link|meta|param|source|track|wbr).*?[^\/])>
replace: <$1 />
First you need to write below code in your settings.json
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
}
then create a .eslintrc file in root level and write this code
{
"extends": ["react-app"],
"rules": {
"react/self-closing-comp": [
"error",
{
"component": true,
"html": true
}
]
}
}
I've used this extension with VS Code for a while now. Works really well with React in both Javascript and Typescript - https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag. The doc says it works by default for the following languages. Try it and see if it is for right for your needs.
{
"auto-close-tag.activationOnLanguage": [
"xml",
"php",
"blade",
"ejs",
"jinja",
"javascript",
"javascriptreact",
"typescript",
"typescriptreact",
"plaintext",
"markdown",
"vue",
"liquid",
"erb",
"lang-cfml",
"cfml",
"HTML (Eex)"
]
}
Why markdown language not seems to be supported by code-snippets in vs-code? I've also tried writing "scope: "md" but it also doesn't work.
{
"Print to console": {
"scope": "markdown",
"prefix": "test",
"body": [
"console.log('$1');",
"$2"
],
"description": "description"
}
}
Create some of the other snippet files like html.json.
Save this file with File | Save As... as markdown.json in the same directory.
Fill in your snippet.
In the Markdown file type your snippet prefix and press CtrlSpace and select the snippet you want.
It seems there is not a completion provider that shows the possible completions while you type or it is not enabled by default.
In the Visual Stuido Code demo minute 28:57-29:20 and 30:20-31:10, some cool JSON code completion is shown.
Where and how do I add a schema for my JSON files to a project?
How does VS Code know which schema to use for a given .json file?
The association of JSON schemas to files is done in the settings (File, Preferences, User Settings or Workspace Settings), under the property 'json.schemas'.
This is an example how the JSON schema for bower is associated to the bower schema.
"json.schemas": [
{
"fileMatch": [
"/bower.json",
"/.bower.json"
],
"url": "http://json.schemastore.org/bower"
},
...
You can also use schemas located in your workspace or define a schema right in the settings itself. Check https://code.visualstudio.com/docs/languages/json for examples.
You can refer your JSON Schema in $schema node and get your intellisense in VS Code right away. No need to configure anywhere else.
For example,
{
"$schema": "http://json.schemastore.org/coffeelint",
"line_endings": "unix"
}
This is the intellisense I was talking about. JSON Schema has the list of possible JSON properties in your current cursor position and VS Code can pull out that list of intellisense.
Note that, every official JSON should have a concrete JSON Schema to prove the data integrity. This answer is still valid!
The three ways I've got VS Code to use a JSON schema are ...
So for something like the Azure Function schema from ... http://json.schemastore.org
"json.schemas": [
{
"fileMatch": [
"/function.json"
],
"url": "http://json.schemastore.org/function"
}
]
In User Settings", i.e. as an element in the users settings.json in 'C:\Users\\AppData\Roaming\Code\User'
In the "Workspace Settings", then in it's the "settings" section in the .code-workspace file ... assuming your're using a VS Code Workspace
In the "Folder Settings", it's "settings" section in the settings.json, which is in the .vscode directory ... assuming your're using a VS Code Workspace
The Folder takes precedence over Workspace, and Workspace over User
And the Workspace and Folder work with relative paths, e.g. in the .code-workspace file ...
"settings": {
"json.schemas": [
{
"fileMatch": [
"/task.json"
],
"url": "./schema/tasks.schema.json"
}
]
}
or in the Folder Settings settings.json in \.vscode\ ...
"json.schemas": [
{
"fileMatch": [
"/task.json"
],
"url": "./schema/tasks.schema.json"
}
]
Just add the following configuration item to the settings file to fix it:
"json.validate.enable": false
Or use the GUI way:
I'm trying my hands at a simple Chrome Extension, but am running into a problem with providing a value for the matches array in my content_scripts.
{
"name": "My Extension",
"version": "1.0",
"description": "My Extension Experiment",
"browser_action": {
"default_icon": "icon.png",
"default_title": "Ext",
"default_popup": "popup.html"
},
"content_scripts": {
"matches": ["http://*"],
"js": ["scripts.js"]
}
}
When I try to load this extension into Chrome, I get the following message:
Could not load extension from 'C:\Users\foo\Desktop\Extensions\bar'.Invalid value for 'content_scripts'.
I cannot see what is "invalid" about my value though. What I'm trying to do is match every URL, so my extension can manipulate the DOM (via javascript within scripts.js) of any page it is ran on. Am I missing something, going about this all wrong, or what?
update
After posting this question, I did notice that the Google example was slightly different than mine, so I modified my code a bit to reflect their syntax:
"content_scripts": [{
"matches": ["http://*"],
"js": ["scripts.js"]
}]
That being said, I still get the following error when trying to load my extension:
Could not load extension from 'C:\Users\foo\Desktop\Extensions\bar'.
Invalid value for 'content_scripts[0].matches[0]'.
You need to surround the value of the content_scripts field in square brackets:
"content_scripts": [ {
"matches": ["http://*"],
"js": ["scripts.js"]
} ]
(see the Chrome Docs for more info)
Incidentally, using http://*/* would be a better match for all urls (see the docs), adding https://*/* if you also need to match those as well.
Edit:
Following your edit, the error you are getting is because of the match pattern being incorrect.
If you want to match every URL, then Google has a special pattern just for this purpose: <all_urls>
Sample usage:
"matches": ["<all_urls>"],
See this page for more info:
https://developer.chrome.com/extensions/match_patterns
Any match pattern should be of the following structure [scheme]://[host][path]
scheme is '*' | 'http' | 'https' | 'file' | 'ftp'
host is '' | '.' (any char except '/' and '*')+
path is '/' (any chars)
For matching any HTTP/S and FILE URL use:
"matches": [
"*://*/*",
"file://*/*"
],
Ref: https://developer.chrome.com/apps/match_patterns
By the way, in order to allow access to local files - add the permission:
"permissions": [
"file://*/*"
]
Or approve file access on the extension settings page.
For many that are getting errors involving:
'content_scripts[0].matches' is missing or invalid.
or
'content_scripts[0].matches[0]': Empty path.
Trying filling in, or creating, the matches field with your specific URL needed.
If you want to use all URLs, then use the <all_urls> tag like below.
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": [ "jquery.js" ]
}
]
Files listed in the "js" array have their path relative to you app.
In other words, the location of "manifest.json" is your root directory.
Note: jquery.js is a file in my project's directory and you should replace it with whatever script file you want.
After many tries following working , it matches all URL's and also supports http & https.enter code here
"manifest_version": 2,
"content_scripts": [
{
"matches": [
"*://*/*",
]
}
If you are using Jquery on a CDN, Just download it and include it to your working folder, And then try to import it
Bro you forgot to add
"manifest_version":2
Which is mandatory one.