How to set file association to custom .env filename in VSCode settings? - visual-studio-code

I have a .envDEV file name that I use for development environment variables.
And VSCode is not recognizing it as a dotenv file.
If I change the language mode for the file, it seems to work (the proper styles are applied, 'though the icon won't change). But it goes away whenever I close and re-open the file.
I'm trying to set a custom file association for this, but without success so far.
seetings.json
"files.associations": {
"*.envDEV": "dotenv" // DOES NOT WORK
"*.envDEV": ".env" // DOES NOT WORK
},
Does anybody know how to do this?

By default .env files have a language id of plaintext, but vscode does something special with it to assign a different icon. The only way I've been able to accomplish what you're asking for is with an icons extension.
The dotenv extension adds syntax highlighting and the dotenv language id to all your .env variant files. Pair that with the vscode-icons extensions, and it changes the icon to the gear that the basic .env file has.
With just the icons extension, you can use the properties file association and that works as well, just add the following to settings.json:
"files.associations": {
"*.env": "properties"
}

With the dotenv extension this works:
"files.associations": {
"*.env*": "dotenv" // THIS WORKS NOW
}

If you don't want to install a separate extension you can set language mod for .env file as makefile or python to get syntax highlighting and # comment support.
"files.associations": {
".env*": "makefile" // or "python"
}

Related

VS Code settings.json is ignored by Eslint when trying to set custom .eslintrc.js path

I'm trying to set up a custom eslintrc.js for my workspace using the settings.json in VS Code with this (I've tried many options):
{
"prettier.configPath": ".vscode/.prettierrc",
"eslint.options": {
"configFile": ".vscode/.eslintrc.js",
"overrideConfigFile": ".vscode/.eslintrc.js"
},
"eslint.lintTask.options": "-c ~/.eslintrc.js"
}
but it seems that no matter what I do the neither ~/.eslintrc.js nor .vscode/.eslintrc.js is picked up.
My problem is that the project has some formatting settings that make it unreadable for me and I'd like to have my own .prettierrc config for local development. This already works, but ESlint conflicts with this as it uses the .prettierrc file that's in the root folder.
A solution for this is to just remove "plugin:prettier/recommended" from the extends list in my .eslintrc.js file (this is why I'm trying to supply my own .eslintrc.js file), but it won't budge. What am I doing wrong?

How to set options of Beautify extension in the Visual Studio Code?

I installed Beautify extension to VSC, however, I could not find .jsbeautifyrc file to set some options. For example, I want to set "brace_style" to ""collapse,preserve-inline". How can I change extension's parameters?
you can create your own .jsbeautify file in your project directory or any containing folder. Please refer to this link for an example file: https://gist.github.com/wzup/fc3254562236c1ec3f69
Here you can also see some of the parameters which you can change. In your case:
{
"html": {
"brace_style": "collapse"
}
}

Associate Dockerfile language with all Dockerfiles in VS Code

What I want to do is tell Visual Studio Code to associate all files containing the word "Dockerfile" in their filename with the Dockerfile language to get the syntax highlighting. According to this site the language is just called "Dockerfile", so I added the following entry to settings.json:
"files.associations": {
"*Dockerfile*": "Dockerfile"
}
But all that happened was that now even the standard Dockerfiles are no longer associated with their respective language. What am I doing wrong?
The language identifier for Dockerfile is a lower-case dockerfile as stated on https://code.visualstudio.com/docs/languages/identifiers. Hence, you need to adjust your snippet as follows:
"files.associations": {
"*Dockerfile*": "dockerfile"
}

VS Code style-lint ignore directories

Is it possible to ignore my CSS path, beacuse I only use stylelint for SCSS validation?
e.g. - I have the following structure:
assets/
css/
scss/
How can I disable the css/ folder from being indexed, trough the settings.json file of VSCode?
I found this in the docs, but I don't know how to implement it in VSCode.
If you're using the VS Code stylelint extension, you can specify ignore paths via the stylelint.configOverrides setting.
Add the following to your VS Code settings.json file:
"stylelint.configOverrides": {
"ignoreFiles": "assets/css/**"
}
Alternatively you can add a .stylelintignore file to the root folder of your project and add the ignore paths there:
assets/css/**
I'm using stylelint#9.2.0 with vscode-stylelint#0.20.4, and for me the .stylelintignore file is not being respected. If i use the CLI it is respected but the vscode plugin does not seem to do this correctly.
Similar to Jack Russell, I found that the VS Code stylelint plugin currently seems to ignore the .stylelintignore file.
To get around this limitation, I removed the .stylelintignore entirely and moved its settings into .stylelintrc instead. I.e. from something like this in .stylelintignore:
ignorethisfolder/**/*
path/to/ignorethisfile.css
To something like this in .stylelintrc:
"ignoreFiles": [
"ignorethisfolder/**/*",
"path/to/ignorethisfile.css",
]

Is it possible to write VS Code extension that modifies tasks.json and launch.json?

I would like to create my own extension that would provide predefined configuration for debugger (launch.json) and a predefined set of tasks (tasks.json).
Right now I have vs code configured in those 2 files but there are lot of hardcodes in many places that will vary across different projects. So ideally I would like to have a plugin that eg reads one configuration file and applies all that stuff to "tasks.json" and "launch.json".
Wondering if that's even possible with vs code extensions API.
I think you can do this with variables defined in settings.json. You can define your own custom settings in settings.json (either user or workspace settings):
{
"editor.formatOnSave": false, // normal settings defined by the editor and plugins
"foo.bar": "baz" // custom setting
}
You can then reference this setting inside tasks.json or launch.json using string interpolation as "${config.foo.bar}".
I'm not sure where this is documented, but I found a reference to this in https://github.com/Microsoft/vscode/pull/11291
Update:
I've created a test repo at https://github.com/boyvinall/vscode-c-dbg. When I invoke the "run" task within tasks.json, I get the following output:
Using through launch.json with my current configuration doesn't seem to work with the "gdb" configuration, although the "cppdbg" configuration does seem to work ok:
NB, in case it's important, I'm running vscode v1.8.1
Visual Studio Code:1.15.1
settings.json (.vscode folder current dir)
{
"foo.bar": "baz" // custom setting
}
launch.json (example)
{
"program": "${workspaceRoot}/${config:foo.bar}.exe"
}
I was looking around found it. But it was out date and was trying to figure it out. Until the helper visual studio code hint gave me the information when mouse hover/over the strings.
"${config.foo.bar}"
does not work.
"${config:foo.bar}"
does work.