I'm using vscode extension for spell checking:
https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker
The problem is - I can't include ".todo" files type. (my .todo files are not in any markup language. They are just "plain text").
I tried(none works for me):
"cSpell.files": ["**/**.todo"] (also turns off all existing files check)
"cSpell.enableFiletypes": [ "*" ] to inclue all fiels types
I notice there is a languages list, but didn't find way to add new one.
Try adding the following cSpell override to your .vscode/cSpell.json file:
{
"name": "lorem ipsum",
"enabledLanguageIds": ["plaintext"], // etc.
"overrides": [
{
"filename": "**/*.todo",
"languageId": "plaintext"
}
]
}
I found out, that by default spell check extension ignore all files from .gitignore.
In my case solution was to add following Modifications in my vscode user settings:
"cSpell.enableFiletypes": [
"todo" // enable .todo files checking
],
"cSpell.useGitignore": false, // disable ignoring files from .gitignore
Thanks to everyone who tried to help me!
Related
I'm using VSCode for web development and I noticed that there is no JavaScript autocomplete/IntelliSense for browser-related types such as Element nor functions such as document.querySelector(). Is there an extension for this that anyone has found?
// tsconfig.json
{
"compileOnSave": true,
"compilerOptions": {
"alwaysStrict": true,
"checkJs": true,
"outDir": "./root/js",
"rootDir": "./src",
"target": "ESNext"
},
"exclude": ["./root/**/*"],
"include": ["./src/**/*"]
}
I was starting to type out document.querySelector() and noticed halfway through that autocomplete wasn't triggering. I triggered it manually (Ctrl-I) and got no suggestions.
For clarification, I'm looking for something that will do this, but with frontend code:
Tried searching for extensions in marketplace, on Google, in VSCode itself - to no avail.
The issue is that the lib field (tsconfig.json or jsconfig.json) hasn't been set to include "dom", which tells the TypeScript compiler (and VS Code's TypeScript support) to include types for web APIs like the DOM.
Fun fact: If you leave the lib field empty, TypeScript will assume certain things to be in it "by default". For more info on that, see this answer I wrote to "How can I make vscode assume a node.js context, so that it doesn't assume fetch exists?"
Turns out #user was right — I needed to add this to my tsconfig.json:
{
"lib": [
"DOM"
]
}
There are a slew of questions/answers on this, and I went through them without success - here's my setup...
Extensions:
snippets.json file location -- C:\Users\USERNAME.vscode\snippets.json
Suggestion Settings:
Added Emmet Path (redacted):
Snippets.json
{
"Less": {
"scope": "php html",
"prefix": "!less",
"body": [
"<script src='https://cdn.jsdelivr.net/npm/less'></script>"
],
"description":"Adds the Less.CSS CDN"
},
"MooTools": {
"prefix": "!cdnmt",
"body": [
"<script src='https: //cdnjs.cloudflare.com/ajax/libs/mootools/1.6.0/mootools-core.min.js' integrity='sha512-P6QjhxYLbTLOHQpilU3lsmhwLfgVh/zN5rVzcGbmiTWhMcpkHVk8eqWk2vqvM0Z6OhJfrdbYoTzJtGQYUj8ibw==' crossorigin='anonymous' referrerpolicy='no-referrer'></script>"
]
}
}
Right now, neither quicktype works. I've tried !less - there's no conflicting shortcut and hitting tab or enter after it doesn't do anything other than tab or enter.
Same goes for MooTools...
Some reviewed links:
here-are-the-default-emmet-settings-in-visual-studio-code
visual-studio-code-user-snippets-not-working
I've gone through the myriad of answers and tried just about everything. Nothing seems to work. I also am unable to locate/edit the defaultSettings.json (opens as read only in vs).
Additional Information (1)
Tried updating included files:
Still not working (FYI - I did restart VSCode to make sure that wasn't blocking it from taking over).
The simplest way to add snippets is to use the interface, either the "File/ Preferences/ Configure User Snippets" menu entry or the similarly named element in the gear icon you can find on the side bar:
You can then choose to add global snippets (to be used in any file type) or per-language snippets:
The program takes care of creating a file with the appropriate name and extension in the correct location. It also adds some boilerplate with documentation. This way you don't need to do prior research about your environment.
{
// Place your snippets for sql here. Each snippet is defined under a snippet name and has a prefix, body and
// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the
// same ids are connected.
// Example:
// "Print to console": {
// "prefix": "log",
// "body": [
// "console.log('$1');",
// "$2"
// ],
// "description": "Log output to console"
// }
}
Thanks to an extension (Caddyfile Syntax, Caddyfile Support) I have highlighting for Caddyfile. Installing the extensions also mapped Caddyfile files with the relevant syntax highlighting rules.
I now would like to also have the same mapping for caddy.conf files.
According to the documentation, I should add an alias for caddy.conf so that it is handled the same way as Caddyfile.
The problem is that I do not know where to add this information in settings.json.
I had a look for anything "caddy" in defaultSettings.json but I do not see any structure that would match th eone in the documentation. Namely, I only see
// Configure settings to be overridden for the caddyfile language.
"[caddyfile]": {
"editor.insertSpaces": false,
"editor.formatOnSave": true
},
What I am looking for should more look like (according to the documentation above)
"languages": [{
"id": "java",
"extensions": [ ".java", ".jav" ],
"aliases": [ "Java", "java" ]
}]
So in practical terms - where in setting.json should I add the alias (or possibly a new mapping)?
Try adding this to your settings.json:
"files.associations": {
"*.conf": "caddyfile"
}
Alternatively, you can invoke the workbench.action.editor.changeLanguageMode command (Ctrl+K M by default, also works by clicking the language label in the status bar) and select the language you want. This is probably preferable if you might have files with the same extension, but different syntax.
As you might know some browsers already support CSS Cascade Layers (https://caniuse.com/?search=%40layer). The main keyword of this feature is #layer. Unfortunately VSCode displays a warning message:
Unknown at rule #layer css(unknownAtRules)
Is there any list of css keywords to include #layer keyword in my VSCode settings?
I tried to use the "css.customData" option. But I didn't manage to get any results. I created a css-data.json file in the same folder as the settings.json file.
What the correct path to the file should look like? I would like to have a relative path but I tried an absolute path as well. Nothing happened. I'm using portable VSCode if it is matter. Here are my attempts:
"css.customData": ["c:\\app\\VSCode\\data\\user-data\\User\\css-data.json"],
"css.customData": ["css-data.json"],
"css.customData": [".\\data\\user-data\\User\\css-data.json"],
"css.customData": ["./data/user-data/User/css-data.json"],
Here is a content of css-data.json:
{
"version": 1.0,
"properties": [],
"atDirectives": [
{
"name": "#layer",
"description": "Declares a cascade layer."
}
],
"pseudoClasses": [],
"pseudoElements": []
}
You probably just need to use
"css.customData": [".vs-code/css-data.json"]
but in case that doesn't work; I fixed this for myself in the following way:
in: .vscode/settings.json
"css.customData": [".vscode/css_custom_data.json"]
and then the .vscode/css_custom_data.json file itself:
{
"atDirectives": [
{
"name": "#layer",
"description": "The #layer CSS at-rule is used to declare a cascade layer and can also used to define the order of precedence in case of multiple cascade layers.",
"references": [
{
"name": "#layer",
"url": "https://developer.mozilla.org/en-US/docs/Web/CSS/#layer"
}
]
}
]
}
This however fails to fully permit the use of the #layer spec as #import rules still can't include a layer() as an example:
#layer reset, pallet, base, layout, local;
#import "style/reset.css" layer(reset); /* unifies / css reset */
#import "style/pallet.css" layer(pallet); /* color pallets */
#import "style/main.css" layer(base); /* primary css*/
now throws 3 errors and 0 warnings whereas without this fix it also throws a warning.
#layer and #property will be supported in vscode v1.72 - due out early October, 2022.
See 1.72 Release Notes:
The CSS language support now also understands the #property and
#layer at-rules.
My guess is that this is just a rule that hasn't been updated in the VSCode internal CSS linters.
Hunting for this warning I came across this stylelint issue #6084 ([at-rule-no-unknown] incorrectly flags #layer). They fixed this through a PR in May 2022.
I was assuming that stylelint is the underlying CSS linter for VS Code but appears it isn't. You can install the stylelint vscode extension (and disable the internal VSCode CSS linters) and this #layer error goes away.
I'm using the VSCode Code Spell Checker, and I wish to detect typos in TXT files. But the issue is, that I want to detect it on TXT files that are being ignored for search by the VSCode.
Here is my settings.js file:
{
"cSpell.words": [
"BING",
"DOGPILE"
],
"search.exclude": {
"**/.vscode": true,
"**/dist": true,
"**/misc": true,
"**/misc/documents": true,
"**/misc/": true,
"/misc/": true,
"misc/**": true,
"**/misc/**": true,
"**/misc/documents/**": true,
"**/node_modules": true,
"**/sources": true
},
"eslint.validate": [
"javascript"
],
"http.proxy": "",
"http.proxyAuthorization": null,
"http.proxyStrictSSL": false,
"editor.renderWhitespace": "none"
}
The file that I want to detect typo located inside the misc directory, that is declared in the "search.exclude" list (I don't want search results from any files in this directory), but I DO WANT to detect typos on theses files.
If I remove all of theses and the settings.js looks like that:
{
"cSpell.words": [
"BING",
"DOGPILE"
],
"search.exclude": { },
"eslint.validate": [
"javascript"
],
"http.proxy": "",
"http.proxyAuthorization": null,
"http.proxyStrictSSL": false,
"editor.renderWhitespace": "none"
}
The TXT file typo detection works, but I get the search results that include files inside the misc directory, which is NOT what I want.
Has anyone faced this issue before and know how to solve it?
Thanks.
as it is explicitly stated in Spell Checker FAQ
What files are excluded by the spell checker?
By default the spell checker excludes the same files excluded by the VS Code search.exclude setting. See discussion: #16, #55 and #95
the correct way to address the problem exposed in the question I would say is to open an issue to the project for a new feature request to allow to override this default behavoir.
as a last resort if you absolutely need to prevent search.exclude from being added to the exclusions you could try to force the code installed on your machine and after restarting vscode you will have the spell check working also in those paths.
DISCLAIMER please note what is illustrated below is a discouraged hack mentioned in here for informational purposes only, obviously if you try this kind of workaround you must be extremely aware of what you are doing
for example:
assuming the extension was installed in ~/.vscode/extensions/streetsidesoftware.code-spell-checker-1.10.2
in the source server/config/documentSettings.js there is the function async fetchSettingsFromVSCode(uri) where it is added :
ignorePaths: ignorePaths.concat(CSpell.ExclusionHelper.extractGlobsFromExcludeFilesGlobMap(exclude)),
by changing in to
ignorePaths: ignorePaths
then quit fron vscode and when re-open it the extension no longer excludes the same files excluded by the VS Code search.exclude setting.