I would like to install a VScode plugin in Theia. It works when I install by specifying the download location of the VSixPackage. Snippet of the package.json file:
.....
"scripts": {
"postinstall": "download-debug-adapters"
},
"adapterDir": "plugins",
"adapters": {
"vscode-cortex-debug": "https://marus25.gallery.vsassets.io/_apis/public/gallery/publisher/marus25/extension/Cortex-Debug/0.3.1/assetbyname/Microsoft.VisualStudio.Services.VSIXPackage"
},
.....
There is a fork of the extension that has some features I require. How do I install a VSCode extension directly from a git repo, eg.: https://github.com/Marus/cortex-debug
Related
I am using vscode as an editor. Using vscode ctrl+shift+p to open up the command pallet and used "Dev Containers: Create Dev container" to create a development container, And it created only one file .devcontainer/devcontainer.json .
{
"name": "Debian",
"image": "mcr.microsoft.com/devcontainers/base:bullseye",
"features": {
"ghcr.io/devcontainers/features/docker-from-docker:1": {},
"ghcr.io/devcontainers/features/github-cli:1": {},
"ghcr.io/devcontainers/features/go:1": {},
"ghcr.io/devcontainers/features/python:1": {},
"ghcr.io/guiyomh/features/golangci-lint:0": {}
}
}
But I would like to install few other packages like jinja2-cli after installation of python/pip3 package mentioned in the features or may be install other OS related packages.
Where should packages should be specified ?
Check that this line is included in your devcontainer.json
"postCreateCommand": "pip3 install --user -r requirements.txt",
Then create a requirements.txt file on the same level as you .devcontainer folder (not inside of it, outside).
If you add a package name to the requirements.txt file, it'll be added to the devcontainer at build time.
You can see an example in this pull request I recently completed which needed a new package and I had to add it to my devcontainer in the last commit.
Side note: You'll see that I also updated my poetry.lock file in a previous commit (using the poetry add package-name in the command line) because that project uses poetry for package management too. You don't need to do that if you aren't using poetry.
I am developping a VSCode extension that I want to try it out in the current VSCode instance, not in a new instance.
Is there a way to install the vscode extension that is developping locally from an unpacked directory, not from a .vsix file.
In Atom editor, I can use atom link to do that. Is there something similar in VSCode?
You can install the extension locally with code --install-extension and install a locally packaged extension. I am doing this with esbuild and yarn:
package.json
"scripts": {
"vscode:prepublish": "yarn run build:base --minify",
"build:base": "esbuild ./src/extension.ts --bundle --outfile=out/extension.js --external:vscode --format=cjs --platform=node",
"build": "yarn build:base --sourcemap",
"package": "mkdirp dist && vsce package -o dist/noteberry.vsix --yarn",
"deploy:local": "yarn package && code --install-extension dist/ext.vsix --force"
...
},
mkdirp is an npm module to create folders.
Original Post
One easy solution without packaging as described in https://vscode-docs.readthedocs.io/en/stable/extensions/install-extension/ would be:
VS Code looks for extensions under your extensions folder
.vscode/extensions. Depending on your platform it is located:
Windows %USERPROFILE%\.vscode\extensions
Mac $HOME/.vscode/extensions
Linux $HOME/.vscode/extensions
If you want to load your extension or customization each time VS Code
runs, copy your project to a new folder under .vscode/extensions.
You could write a script to delete / copy over all files.
How to force the Tailwind CSS IntelliSense extension for VSCode work with .html.eex and .html.leex files?
I same tried add settings .html.eex and .html.leex for IntelliSense for CSS class names in HTML, but don’t work for me.
So I can see this extension support HTML (EEx): https://github.com/bradlc/vscode-tailwindcss/blob/f5dfe02f74ac9bd68529f1997ae875691b819833/src/index.ts#L50
I found a solution, helped me this extantion https://github.com/ecmel/vscode-html-css.
Thanks you so much Ecmel Ercan and tme_317 for your thoughts!
But this extension not worked with HTML (EEx) files. I contributed to this. Until the author has merged pull-request, you can use my branch: https://github.com/reducio/vscode-html-css/tree/add-html-eex
git clone https://github.com/reducio/vscode-html-css/tree/add-html-eex
npm install
vsce package
# deps may be need, if you need hack this code
npm install -g typescript
npm install -g yo generator-code
npm install -g vsce
npm i -g #zeit/ncc
So, after run vsce package you get file vscode-html-css-0.2.3.vsix in root project folder.
Then you need install extension manually:
Don't forget about settings of extension.
In settings.json add:
"css.remoteStyleSheets": [
"https://unpkg.com/tailwindcss#^1.0/dist/tailwind.min.css"
],
Usage:
You can view a list of attributes via ctrl + space.
Enjoy auto completion Tailwind CSS in your HTML (EEx) files.
How can I use globally installed Stylelint plugins in Stylelint CLI?
Can I set the configBasedir option as the node_modules/ path of those plugins?
How can I use globally installed Stylelint plugins in Stylelint CLI?
As of stylelint#9.7.0, you can reference a globally installed plugin in the same way as you would a locally installed one.
For example:
npm i -g stylelint
npm i -g stylelint-selector-no-empty
Then in your configuration object e.g. your .stylelintrc file:
{
"plugins": ["stylelint-selector-no-empty"],
"rules": {
"plugin/stylelint-selector-no-empty": true,
}
}
Finally, run stylelint from the CLI as normal:
stylelint your-file.css
I am new to VS Code and want to use it for the development of an AngularJs app. However, I am having the problem of adding a reference link on the top of all JS files.
like this.
/// <reference path="path/to/typings/tsd.d.ts" />
is there an alternative to this?
By default, all JavaScript files opened in Visual Studio Code are treated as independent units. If you want to enable IntelliSense for the whole project remember to place the jsconfig.json file at the root of your project.
Below is a jsconfig.json file which defines the JavaScript target to be ES6 and excludes the node_modules folder.
{
"compilerOptions": {
"target": "ES6",
"module": "commonjs",
"allowSyntheticDefaultImports": true
},
"exclude": [
"node_modules"
]
}
You can get IntelliSense for AngularJS library through the use of type definition .d.ts files from DefinitelyTyped repository. The typings are easily managed using Typings manager.
To install Typings manager execute npm install typings --global. This will install typings manager as your global npm module. Then you can install AngularJS Definitions using typings install dt~angular --global command. This will install and persist definitions from DefinitelyTyped repository as global definitions.
You can list available definitions using typings search angular.
Now you'll have IntelliSense available for all files in your project without the need of adding /// reference.
You can find more in the VS Code manual.
Hope this helps!
This is what worked for me on Linux Ubuntu 16.04 x64
npm init
sudo npm install -g typings
sudo ln -s /usr/bin/nodejs /usr/bin/node
typings install dt~angular --save --global
touch jsconfig.json
UPDATE:
Just wanted to advice against building new applications in AngularJS any more.
Angular2 + angular-cli is MUCH easier & expandable.
Believe me, Learn Angular 2 and save yourself MUCH hassle