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"
Related
Prettier in VS Code uses the wrong indentation, even after I changed all the places I can think of to a width of "4".
Here are my file contents (some are maybe not necessary, but I added them while trying to fix it):
c:\Users\jp\Documents\Repositories\Game\Client\.prettierrc.js
module.exports = {
semi: true,
trailingComma: "none",
singleQuote: false,
printWidth: 120,
tabWidth: 4,
endOfLine: "auto",
trailingComma: "none"
};
c:\Users\jp\Documents\Repositories\Game\Client\.editorconfig
indent_size = 4
c:\Users\jp\Documents\Repositories\Game\Client\.eslintrc.js
module.exports = {
parser: "#typescript-eslint/parser", // Specifies the ESLint parser
parserOptions: {
ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features
sourceType: "module", // Allows for the use of imports
ecmaFeatures: {
jsx: true // Allows for the parsing of JSX
}
},
settings: {
react: {
version: "detect" // Tells eslint-plugin-react to automatically detect the version of React to use
}
},
extends: [
"plugin:react/recommended", // Uses the recommended rules from #eslint-plugin-react
"plugin:#typescript-eslint/recommended", // Uses the recommended rules from the #typescript-eslint/eslint-plugin
"plugin:prettier/recommended", // Enables eslint-plugin-prettier and eslint-config-prettier. This will display prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array.
"prettier"
],
rules: {
// Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
// e.g. "#typescript-eslint/explicit-function-return-type": "off",
"no-var": "error", // preference for let and const only
"prefer-const": "error",
"react/react-in-jsx-scope": "off",
"#typescript-eslint/no-empty-function": "off",
"react/prop-types": "off",
"prettier/prettier": [
"warn",
{
semi: true,
trailingComma: "none",
singleQuote: false,
printWidth: 120,
tabWidth: 4,
endOfLine: "auto",
trailingComma: "none"
}
]
}
};
c:\Users\jp\Documents\Repositories\Game\Client\.vscode\settings.json
{
"editor.formatOnSave": true,
"editor.formatOnType": true,
"prettier.tabWidth": 4,
"editor.tabSize": 4,
"jestrunner.jestCommand": "npm run test -- --watchAll=false"
}
My VS Code configuration is set to "4,", and in the bottom bar in VS Code it's set to "4". I also set "detect indendation" to false.
Here is what the Prettier extension output says when I format the document:
["INFO" - 17:18:30] Formatting file:///c%3A/Users/jp/Documents/Repositories/Game/Client/src/App.tsx
["INFO" - 17:18:30] Using config file at 'c:\Users\jp\Documents\Repositories\Game\Client\.prettierrc.js'
["INFO" - 17:18:30] Using ignore file (if present) at c:\Users\jp\Documents\Repositories\Game\Client\.prettierignore
["INFO" - 17:18:30] File Info:
{
"ignored": false,
"inferredParser": "typescript"
}
["INFO" - 17:18:30] Detected local configuration (i.e. .prettierrc or .editorconfig), VS Code configuration will not be used
["INFO" - 17:18:30] Prettier Options:
{
"filepath": "c:\\Users\\jp\\Documents\\Repositories\\Game\\Client\\src\\App.tsx",
"parser": "typescript",
"semi": true,
"trailingComma": "none",
"singleQuote": false,
"printWidth": 120,
"tabWidth": 3,
"endOfLine": "auto"
}
["INFO" - 17:18:30] Formatting completed in 0.027ms.
It even says it found the right configuration file, yet uses the wrong indentation.
I restarted VS Code while making the changes to make sure nothing was cached.
In the parent path no .editorconfig is present.
I just don't have any idea where Prettier may take the wrong indentation from...
Edit: When I use the "Quick Fix" with "Fix all prettier/prettier problems", it uses the correct indentation. Formatting on save or Using "Format document" uses the wrong one. Output of the extension output window is the same.
Check if your detect indentation has been enabled. Disable it.
It's not obvious at first, but prettier has order of reading custom configs and is this one according to documentation:
Prettier uses cosmiconfig for configuration file support. This means you can configure Prettier via (in order of precedence):
"prettier" key in your package.json file.
prettierrc file written in JSON or YAML.
.prettierrc.json, .prettierrc.yml, .prettierrc.yaml, or .prettierrc.json5 file.
.prettierrc.js, .prettierrc.cjs, prettier.config.js, or prettier.config.cjs file that exports an object using module.exports.
.prettierrc.toml file.
I can only assume you forgot to check configuration in package.json, and remove these settings from there.
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 use prettier to format my typescript code with the following config. However, prettier doesn't fix spacing/blank line issues as you can see below in the code snippet. There is supposed to be a blank line between userSignupSchema and userLoginSchema and only one blank line between userLoginSchema and tokenSchema. I am using VS Code. Any idea how to fix this?
{
"extends": ["airbnb", "prettier", "plugin:node/recommended"],
"plugins": ["prettier"],
"rules": {
"prettier/prettier": "error",
"no-unused-vars": "warn",
"no-console": "off",
"func-names": "off",
"no-process-exit": "off",
"object-shorthand": "off",
"class-methods-use-this": "off"
},
"singleQuote": true
}
export const userSignupSchema = z.object({
name: z.string()
})
export const userLoginSchema = z.object({
name: z.string()
})
export const tokenSchema = z.object({
access_token: z.string()
})
Check the output of the ESLint extension: Ctrl + J to open the panel if it's not open → Output → ESLint. Your ESLint configuration is invalid. You can't have "singleQuote": true there. It's Prettier's option, so it should be specified in Prettier's configuration file.
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'm using VS Code and Cucumber extension https://marketplace.visualstudio.com/items?itemName=alexkrechik.cucumberautocomplete&ssr=false#overview doesn't work.
This is my settings.json in .vscode folder:
{
"cucumberautocomplete.steps": [
"src/step_definitions/*.js",
],
"cucumberautocomplete.syncfeatures": "src/features/*feature",
"cucumberautocomplete.strictGherkinCompletion": true,
"cucumberautocomplete.strictGherkinValidation": true,
"cucumberautocomplete.smartSnippets": true,
"cucumberautocomplete.stepsInvariants": true,
// "cucumberautocomplete.pages": {
// "users": "test/features/page_objects/users.storage.js",
// "pathes": "test/features/page_objects/pathes.storage.js",
// "main": "test/features/support/page_objects/main.page.js"
// },
"cucumberautocomplete.skipDocStringsFormat": true,
"cucumberautocomplete.formatConfOverride": {
"And": 3,
"But": "relative",
},
"cucumberautocomplete.onTypeFormat": true,
"editor.quickSuggestions": {
"comments": false,
"strings": true,
"other": true
},
"cucumberautocomplete.gherkinDefinitionPart": "(Given|When|Then)\\(",
"cucumberautocomplete.stepRegExSymbol": "'"
}
And this is what I have added to settings.json of VS Code:
{
"workbench.colorTheme": "Default Light+",
"editor.quickSuggestions": true,
"window.zoomLevel": 0
}
When in my feature file I get the message for each line:
"Was unable to find step for "Given I am on the dashboard page"cucumberautocomplete"
Can someone help to resolve this issue and make it work for VS Code?
Kind regards,
mismas
So it finally worked when I:
I. deleted .vscode/settings.json (including the folder)
II. added following in global settings.json of Visual Sudio Code (the one in Users etc directory)
{
"workbench.colorTheme": "Default Light+",
"editor.quickSuggestions": true,
"window.zoomLevel": 0,
"gherkin-autocomplete.featuresPath": "src/features",
"cucumberautocomplete.steps": [
"src/step_definitions/*.js",
],
"cucumberautocomplete.syncfeatures": "src/features/*feature",
}
III. restarted VS Code
Either is something wrong with the plugin => meaning they didn't implemented as they think it should work or documentation is out dated ...
I had to remove the line
"cucumberautocomplete.stepRegExSymbol": "'"
and then it worked for me.
Just remove or comment on below line from setting.json
"cucumberautocomplete.stepRegExSymbol": "'"
It worked for me.
Windows10:
navigate to %APPDATA%\Code\User (which is VScode config folder)
add
"gherkin-autocomplete.featuresPath": "features",
"cucumberautocomplete.steps": [
"features/step_definitions/*.js",],
"cucumberautocomplete.syncfeatures": "features/*feature"
restart vscode