Related
In my project (vite powered) I use aliases. I have configured it, and they work for build and jump in .ts.
I have problem when I try to jump in src/app.scss files.
// case 1: vite OK, vscode: Fail
#import '$bs/bootstrap';
// case 2: vite Fail, vscode OK
#import '~bootstrap/scss/bootstrap';
case 1
When I try to go through an alias to a file with Ctrl + Click, vscode doesn't find the file and asks if I want to create it.
case 2
For vscode there is an alias ~ on node_modules, but then you cannot compile the project in vite.
I tried
Vite + tsconfig.json
vite: {
resolve: {
alias: {
'$bs': path.resolve('./node_modules/bootstrap/scss'),
}
}
And in tsconfig.joson (and I create jsonfig.json):
"paths": {
"$lib": ["src/lib"],
"$lib/*": ["src/lib/*"],
"$bs/*": ["node_modules/bootstrap/scss/*"],
}
},
"include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.ts", "src/**/*.svelte"]
Couple vscode extensions:
"wudy.vs-alias-jump",
"paulgui.alias-jump",
"svelte.svelte-vscode",
"mariocadenas.alias-resolver"
"vs-alias-jump.alias": {
"$lib": "${folder}/src/lib",
"$bs": "${folder}/node_modules/bootstrap/scss",
},
"aliasJump.alias": {
"$bs": "/node_modules/bootstrap/scss",
},
"jumpToAliasFile.alias": {
"$bs": "D:/dev/node/layout-test/sveltekit-attractions-ui-test/node_modules/bootstrap/scss",
}
~~//edit 1~~
~~I found a working solution, but I'm not entirely happy with it.~~
Is it possible to somehow change the vscode resolver?
resolve.alias: {
'~bootstrap': path.resolve( './node_modules/bootstrap')
}
edit 2
I don't know what happen, but on other PC this don't works. (I saw some vite message about discovering new dependency and this starts work...)
I am trying to create a Chrome DevTools Extension with Vite.
There are a couple different entry points. The main two are src/background.ts and devtools.html (which references src/devtools.ts).
There are is some code that I want to shared between them in src/devtools-shared.ts.
After running the build, the entry points still contain import statements. Why and how do I get rid of them so they are self-contained bundles (Ideally not IIFE, just good old top level scripts)?
Here is what I have got:
vite.config.js:
const { resolve } = require('path')
const { defineConfig } = require('vite')
module.exports = defineConfig({
resolve: {
alias: {
"root": resolve(__dirname),
"#": resolve(__dirname, "src")
}
},
esbuild: {
keepNames: true
},
build: {
rollupOptions: {
input: {
'background': "src/background.ts",
'content-script': "src/content-script.ts",
'devtools': "devtools.html",
'panel': "panel.html",
},
output: {
entryFileNames: chunkInfo => {
return `${chunkInfo.name}.js`
}
},
// No tree-shaking otherwise it removes functions from Content Scripts.
treeshake: false
},
// TODO: How do we configured ESBuild to keep functions?
minify: false
}
})
src/devtools-shared.ts:
export const name = 'devtools'
export interface Message {
tabId: number
}
src/background.ts:
import * as DevTools from './devtools-shared'
src/devtools.ts:
import * as DevTools from './devtools-shared'
And then in dist/background.js I still have:
import { n as name } from "./assets/devtools-shared.8a602051.js";
I have no idea what controls this. I thought there would not be any import statements.
Does the background.ts entry point need to be a lib or something?
For devtools.html is there some other option that controls this?
I know there is https://github.com/StarkShang/vite-plugin-chrome-extension but this doesn't work very well with Chrome DevTool Extensions. I prefer to configure Vite myself.
It turns out that this is not possible. Rollup enforces code-splitting when there are multiple entry-points. See https://github.com/rollup/rollup/issues/2756.
The only workaround that I can think of is to have multiple vite.config.js files such as:
vite.config.background.js
vite.config.content-script.js
vite.config.devtools.js
Then do something like this in package.json:
"scripts": {
"build": "npm-run-all clean build-background build-content-script build-devtools",
"build-background": "vite build -c vite.config.background.js",
"build-content-script": "vite build -c vite.config.content-script.js",
"build-devtools": "vite build -c vite.config.devtools.js",
"clean": "rm -rf dist"
},
This is not very efficient as it repeats a lot of work between each build but that's a Rollup problem.
I want to disable rule for all files inside nested directory. I found examples only for exact path or by file extension. But it is not what I want.
We use it for shared config and don't know where this directory will be. We have many of them.
I'm trying config like this:
{
overrides: [
{
files: [
'**/test/**/*',
],
rules: {
"import/no-extraneous-dependencies": "off"
}
},
],
}
But glob like **/test/**/* and many others didn't not work.
Can someone help to reach this goal?
The above code should work.
How were you testing this? If it's an extension like VSCode you may need to refresh things to see latest definitions loaded.
If you are using a eslint service like esprint you will also need to restart it to grab latest definitions.
Caching
Make sure that eslint is not configured to cache results to avoid having to cache bust when debugging things. eslint docs
Here's an example for a react-native app with multiple overrides
module.exports = {
...baseConfig,
overrides: [
typescriptOverrides,
e2eOverrides,
themeOverrides,
{
files: ['**/*.style.js'],
rules: {
'sort-keys': [
'error',
'asc',
{
caseSensitive: true,
natural: true,
},
],
},
},
{
files: ['**/*.test.js'],
rules: {
'arrow-body-style': 'off',
},
},
],
};
Debugging the glob matcher
Run eslint in debug mode and see all the files being run example DEBUG=eslint:cli-engine npx eslint src/**/*.test.js
You can test your glob patterns by running a ls command. Example: ls ./src/**/*.test.js will either return all the files or 'no matches found'.
Is there a normal way to copy and paste in vs code using vim extension?
I've tried mapping VIM register commands to the shortcut commands I'm used to (ctrl + c for copying and ctrl + v for pasting), but the results are pretty weird and I'm not sure how to do this correctly.
While using vim the key bindings were quite simple,
vimrc file:
map <C-c> "+y
map <C-v> "+p
Now I try to migrate those to vs-code by editting json.settings file:
{
"vim.visualModeKeyBindings": [
{
"before": ["<C-c>"],
"after": ["\"", "+", "y"]
},
{
"before": ["<C-v>"],
"after": ["\"", "+", "p"]
},
], }
I want this to operate both in visual mode and in normal mode (for pasting), and be able to copy and paste from clipboard using these shortcuts.
How to do this correctly?
Is there another way to do this?
Vim - extension config flag
Tick the checkbox in settings by searching for "vim clip".
or
Paste the following inside your VS Code's settings.json file:
"vim.useSystemClipboard": true
Access VSCode settings.json file:
Press Ctrl + , (or go to File > Preferences > Settings)
Click the icon: "file with arrow" in the top right corner
Settings found in VSCodeVim/Vim repository quick-example
Rather than rebinding, you can simply stop the vscodevim extension from handling Ctrl-C and Ctrl-V entirely, which then allows VSCode to handle them natively. This can be done by placing the below code in the extension's settings.json file:
"vim.handleKeys": {
"<C-c>": false,
"<C-v>": false
}
This will work regardless of which mode you're in, and will perfectly accommodate the system clipboard. I'm not sure if the <C-c> is necessary, but the <C-v> definitely is, as <C-v> is the standard Vim chord to enter visual block mode.
As an aside, your rebind method is perfectly valid; it just requires a bit more code:
// For visual mode
"vim.visualModeKeyBindings": [
{
"before": ["<C-c>"],
"after": ["\"", "+", "y"]
},
{
"before": ["<C-v>"],
"after": ["\"", "+", "p"]
}
],
// For normal mode
"vim.normalModeKeyBindings": [
{
"before": ["<C-c>"],
"after": ["\"", "+", "y"]
},
{
"before": ["<C-v>"],
"after": ["\"", "+", "p"]
}
]
In the latest version of VS code (on Linux, flatpak version, 1.68.1) and vim addon (at the time of writing), this can be easily enabled by ticking the "Vim: Use System Clipboard".
Note: You can open settings by Ctrl+, then search for 'vim clipboard'
I have found that one can use CTRL+INSERT / SHIFT+INSERT successfully with VS Code VIM to copy to/from the system clipboard without stumbling over the VIM buffers.
For context, I'm running VS Code on WSL2 on Windows.
Use vs code default copy, paste, delete line.
"vim.normalModeKeyBindingsNonRecursive": [
{
"before": ["d","d"],
"commands":["editor.action.deleteLines"],
"when":"textInputFocus && !editorReadonly"
},
{
"before":["y"],
"commands":["editor.action.clipboardCopyAction"],
"when":"textInputFocus"
},
{
"before":["y","y"],
"commands":["editor.action.clipboardCopyAction"],
"when":"textInputFocus"
},
{
"before":["p"],
"commands":["editor.action.clipboardPasteAction"],
"when":"textInputFocus && !editorReadonly"
}
],
"vim.visualModeKeyBindingsNonRecursive":[
{
"before":["y"],
"commands":["editor.action.clipboardCopyAction"],
"when":"textInputFocus"
},
{
"before":["y","y"],
"commands":["editor.action.clipboardCopyAction"],
"when":"textInputFocus"
},
{
"before":["x"],
"commands":["deleteRight"],
"when":"textInputFocus"
},
]
https://github.com/VSCodeVim/Vim/#key-remapping
https://code.visualstudio.com/docs/getstarted/keybindings
You can also access system clipboard with vim
In INSERT mode hit CTRL+R then * or +
If you use Linux (or a terminal itself) you must know that for copy and paste you add the shift key in the middle, that is:
ctrl + shift + c to copy
ctrl + shift + v to paste
Thus, for me is more simple to remember this, and add it to the configuration, because it helps me to see VS Code as a "terminal".
Steps:
F1
Preferences: Open Keyboard shortcuts (JSON)
Add this
{
"key": "ctrl+shift+c",
"command": "editor.action.clipboardCopyAction"
},
{
"key": "ctrl+shift+v",
"command": "editor.action.clipboardPasteAction"
}
For mac users,
add this into the settings.json
"vim.handleKeys":{
"<D-c>": false
}
Access VSCode settings.json file:
Press Cmd + , (or go to File > Preferences > Settings)
Click the icon: "file with arrow" in the top right corner
I am using VScode with latest version of Eslint. It is my first time using a linter.
I keep getting this linting error when using a tab as indentation:
severity: 'Error'
message: 'Expected indentation of 1 tab but found 4 spaces. (indent)'
at: '4,5'
source: 'eslint'
Here is my config file
{
"env": {
"browser": true,
"commonjs": true,
"es6": true,
"node": true
},
"extends": "eslint:recommended",
"rules": {
"indent": [
"error",
"tab"
],
"linebreak-style": [
"error",
"unix"
],
"quotes": [
"error",
"single"
],
"semi": [
"error",
"always"
]
}
}
I don't understand why this error is being thrown as I indicated tabs for indentation. It is obviously calculating my 1 tab as 4 spaced but I don't understand why it is doing that when I am pressing tab for indentation.
update: The reason is because in VScode using ctrl + shift + i to beautify code will actually use spaces and not tabs. That is the reason.
Try to disable indent inside .eslintrc.js file
rules: {
'indent': 'off'
}
this works fine for me
In VSCODE, go to menu:
File / Preferences / Settings then Text Editor (or just search for 'tab' in the search settings box)
Then remove the tick from the following settings:
Insert Spaces
Detect Indentation
Also to auto format the document with the default VSCode keyboard shortcut use:
Shift+Alt+f
If you use both eslint and prettier, don't disable indent by using {'indent': 'off'} in rules object. To ensure the consistency of your code style, you have to use this rule.
Solution:
This issue is probably happened because of eslint & prettier conflict.
Try to play with different options of eslint in .eslintrc file.
If you hover the error lines in vsCode, at the end of error description you can click on that link to see eslint docs.
For example, in case of indent docs is in this link:
Eslint Indent Docs
For me, error resolved by adding this line (for ternary expressions):
...
rules: {
indent: [
'error',
2,
{
SwitchCase: 1,
ignoredNodes: ['ConditionalExpression'], <-- I add this line
},
],
...
You can also try flatTernaryExpressions or offsetTernaryExpressions for ternary expressions.
You can automaticaly fix the problems with
npm run lint -- --fix
I used VScode to solve this problem. All you have to do is hold the mouse over the part where there is an error.
and...
Wee, that exactly what it says. You have in your config "indent": [ "error", "tab" ], So it expects tab as indent. But found in your file 4 spaces. Remove spaces and put tab in you file
I had a similar problem and solved with this code:
rules: {
...
indent: [2, "tab"],
"no-tabs": 0,
...
}
change "editor.tabSize": 4
to "editor.tabSize": 2 in VS Code Settings
If you are using VSCODE follow the next steps.
Access the settings by clicking: code > preferences > settings, as shown in the following image.
In the settings, click: Text Editor after that, uncheck the Insert Space option and the Detect Indentation option as shown in the following image.
Restart VSCODE and your dev server.
There was a conflict between plugins in my example. I'm using eslint version 8.24.0. To fix, i just removed the rule plugin:prettier/recommended and added prettier at last position from extends as explained in eslint-config-prettier documentation. See: https://github.com/prettier/eslint-config-prettier#arrow-body-style-and-prefer-arrow-callback
Before:
"extends": [
"eslint:recommended",
"plugin:#typescript-eslint/recommended",
"plugin:prettier/recommended",
"plugin:storybook/recommended",
]
After:
"extends": [
"eslint:recommended",
"plugin:#typescript-eslint/recommended",
"plugin:storybook/recommended",
"prettier"
]
I was having the same problem and I solved my problem with documentation. Instead of disabling eslint indent, you can add it as shown in the documentation.
Docs
Simple:
rules: {
indent: ['error', 2, { "MemberExpression": 1 }],
}
In file
settings.json
remove this line if have:
"editor.defaultFormatter": "esbenp.prettier-vscode",
eslint conflict with prettier
It worked for me, if error is coming then just solve it line by line simply in your code,
like :
1.)Expected indentation of 2 spaces but found 8 -> then put only 2 spaces from the starting of the line
2.)Unexpected tab character -> don't use tabs, use spaces
3.)Trailing spaces not allowed -> don't give any spaces after lines end.
4.)Missing space before value for key 'name' -> put 1 space after ":" in object value
5.)A space is required after ',' -> put 1 space after "," in parameter of the function
6.)Opening curly brace does not appear on the same line as controlling statement -> just put the opening curly brace where function starts in the same line
7.)Closing curly brace should be on the same line as opening curly brace or on the line after the previous block -> put the closing curly brace just below where the function starts.
Please add the below comment at the first line of the JS file that you are customizing.
/* eslint-disable */