Here is my babelrc
{
"presets": ["es2015"],
"env": {
"production": {
"presets": ["minify"],
"comments": false
}
}
}
And I'm transpiling from command line
npx babel test.js --source-maps
and my minified output has double quotes, even though my source uses single quotes. Could someone help point out how I could get minified output with single quotes? Thank you.
Related
Using a Vite app I can include this in my vite.config.js:
resolve: {
alias: {
"#": path.resolve(__dirname, "./src"),
},
},
which allows me to use the '#' symbol (at character) for path names. This lets me have imports that look like this:
import Home from "#/pages/Home.vue";
As opposed to this:
import Home from "../../../pages/Home.vue";
The problem is that intellisense won't show up in any meaningful way when using the '#' path but it will when I use the '..' path. How do I enable path intellisense starting with '#'
Pictures to clarify what I mean by "intellisense won't show up in any meaningful way when using the '#' path":
Using '..' path
Using '#' path
You also need to tell vscode with jsconfig.json or tsconfig.json file, for example:
{
"compilerOptions": {
"baseUrl": ".",
"target": "es6",
"paths": {
"#/*": ["./src/*"],
}
}
}
You must add jsconfig.json file in root your project with paths parameter value:
"paths": {
"#/*": [
"./src/*"
]
},
jsconfig.json
structure of project
I'm working on a React project in vscode. I noticed a few days ago that any of my imports that point to a directory with an index.js/jsx file in them cannot be resolved by cmd+clicking on the import or the function name.
I get an error in the bottom right "Unable to open : File is a directory"
I have the following in my jsconfig.json file:
{
"compilerOptions": {
"allowSyntheticDefaultImports": false,
"target": "es2017",
"jsx": "preserve",
"baseUrl": ".",
"paths": {
"#/*": [
"src/*"
]
}
},
"exclude": [
"node_modules",
"**/node_modules",
"dist"
]
}
I've tried:
Removing the jsconfig entirely
Various combinations of module import/export patterns
Various combinations of paths/baseUrl/other options in the jsconfig file
Disabling all extensions
Nothing seems to work. The only way I get cmd+click to work is if I point my imports directly at the component itself, or directly at the index.js file.
Does anyone have any insights, please? Googling hasn't shone much light on anything. It's not the end of the world as I cmd+t to most things but it sure is annoying. FWIW Webstorm handles the imports without any issues. Cheers.
EDIT: I forgot to mention. For added spiciness, the cmd+click works for a few seconds while vscode loads. Then "something" happens and it starts throwing the error. Other projects seem to be ok.
I think I may have solved it by adding a tsconfig.json to the project root with the same paths etc. I can now reliably click on import and see function definitions on hover.
If anyone has a similar problem, try the following:
{
"compilerOptions": {
"moduleResolution": "node",
"esModuleInterop": true,
"resolveJsonModule": true,
"baseUrl": ".",
"paths": {
"#/*": [
"src/*"
]
},
},
"include": [
"src/**/**.ts",
"tests/**/*.ts"
],
"exclude": [
"node_modules"
]
}
I have been using vscode prettier for few months now. I always used it to auto format my codes with vscode shortcut Shift + Alt + F or type >Format Document in command palette
But all of a sudden, vscode gave me this error this error msg: "invalid prettier configuration file detected. See log for details.". This happend after update vscode to v1.53
When I click on "show Log". It show me this:. (It is much much more longer of cause, but I think here is the most import part)
["ERROR" - 2:50:11 PM] Invalid prettier configuration file detected.
["ERROR" - 2:50:11 PM] Must use import to load ES Module: /home/koonfoon/git-repos/koonfoon/someRepo/.prettierrc.js
require() of ES modules is not supported.
require() of /home/koonfoon/git-repos/koonfoon/someRepo/.prettierrc.js from /home/koonfoon/.vscode-server/extensions/esbenp.prettier-vscode-5.9.1/node_modules/prettier/third-party.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename .prettierrc.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /home/koonfoon/git-repos/koonfoon/someRepo/package.json.
Inside my package.json has value "type": "module".
This is how my .prettierrc.js looks like:
// .prettierrc.js
module.exports = {
semi: true,
trailingComma: "all",
singleQuote: true,
printWidth: 120,
tabWidth: 4
};
.eslintrc.js:
// .eslintrc.js
module.exports = {
"env": {
"commonjs": true,
"es2021": true,
"node": true
},
"extends": [
//"eslint:recommended",
"plugin:#typescript-eslint/recommended",
"prettier/#typescript-eslint",
"plugin:prettier/recommended"
],
"parser": "#typescript-eslint/parser",
"parserOptions": {
"ecmaVersion": 12,
"sourceType": "module"
},
"rules": {
}
};
Please note: it was working fine until vscode updated to v1.53
My repo is written in typescript.
I have no ideal what cause this error.
Please help.
Thank you.
I'd like to make files be single-quotes on save without prettier and using only eslint or configuring basic VScode settings.
I've read that the .eslintrc.js needs to be edited to change double-quotes to single-quotes on save, but where is it located in VScode? I've tried searching in settings but could not find .eslintrc.js.
This is working for me
My eslint.rc
{
... //other options
"rules": {
"quotes": [2, "single"]
}
}
My vscode settings.json
{
...,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"eslint.validate": [
"typescript",
"typescriptreact"
]
}
in your vscode settings, add these:
"javascript.preferences.quoteStyle": "single",
"typescript.preferences.quoteStyle": "single"
I call browserify with npm from the package.json scripts block. Here's an abbreviated version of the script.
"build:js": "browserify -r ./config.js:config -e -d src/index.js > build/index.js"
Everything works great. Inside index.js, I just refer to this parameter using: require('config') and browserify does the rest.
Now I'm trying to set up karma with browserify for testing, and karma-browserify can't find that variable. I've looked around and haven't found much, but tried to add require: ['./src/app/config/config-dev.js'] to my karma.conf.js inside the browserify object, like so:
browserify: {
debug: true,
require: ['./src/app/config/config-dev.js']
}
But karma doesn't make the connection between the require statement in the index to the parameter file, if nothing else, then because it isn't named. What I need to know is the syntax for karma when I use browserify CLI to add a param.
Any pointers to documentation explaining this or ideas about what I could try here would be super helpful. Thanks!
Try adding your require resolution to your package.json under the "browser" field.
E.g.:
"browser": {
"config": "./config"
}
If you’re trying to have a different config based on your environment then you could do:
./config.js:
if (process.env.NODE_ENV === 'production') {
module.exports = { /* production config */ };
} else if (process.env.NODE_ENV === 'development') {
module.exports = { /* development config */ };
} else if (process.env.NODE_ENV === 'test') {
module.exports = { /* test config */ };
}
then in your package.json you would have something like:
"scripts": {
"build:js": "NODE_ENV=production browserify -d -e src/index.js",
"test": "NODE_ENV=test karma"
},
"browserify": {
"transform": [
"envify"
]
}
envify being a crucial part which allows you to replace environment variables with their string directly in the code. e.g.: process.env.NODE_ENV === 'development' might become simply 'development' === 'development'. Such things can then be removed with a minification tool like uglifyjs.