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.
Related
I tried to align VSCode extension and my local version of Prettier CLI in my project in order to get same results from both tools.
Prettier VSCode Extension : v9.10.4 (depends on prettier >=2.8.0)
Prettier : v2.8.0
With the following settings
// .vscode/settings.json
{
"prettier.documentSelectors": ["**/*.svg"],
"prettier.resolveGlobalModules": false,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"prettier.requireConfig": true,
"prettier.prettierPath": "./node_modules/prettier",
}
// .prettierrc
{
"printWidth": 80,
"semi": true,
"singleQuote": true,
"trailingComma": "es5",
"arrowParens": "always",
"bracketSameLine": false,
"overrides": [
{
"files": ["*.tsx"],
"options": {
"parser": "typescript"
}
}
]
}
And here is my test file
import * as React from 'react';
function Test() {
const [indicatorStyle, setIndicatorStyle] = React.useState<React.CSSProperties>({});
}
The "Format Document" option from VSCode gives this result
import * as React from 'react';
function Test() {
const [indicatorStyle, setIndicatorStyle] = React.useState<
React.CSSProperties
>({});
}
And the result from Prettier 2.8.0 CLI
import * as React from 'react';
function Test() {
const [indicatorStyle, setIndicatorStyle] =
React.useState<React.CSSProperties>({});
}
What should I do to get the same result instead (the result from Prettier CLI looks better in this case) ?
Thank you.
It seems to be related to a cache problem. After restarting VSCode I get the same results on both tools now!
I was trying out the customizations from this post (
Change highlight text color in Visual Studio Code) but it broke my VS Code settings.json.
I followed the first answer, the highlighting now works.
But when I click on the top to bring up the "Menu Bar", I get the message:
Unable to write into user settings. Please open the user settings to correct errors/warnings in it and try again.
{
"workbench.colorTheme": "One Monokai",
"security.workspace.trust.untrustedFiles": "open",
"files.autoSave": "afterDelay",
"editor.minimap.enabled": false,
"editor.wordWrap": "on",
"window.commandCenter": false,
"workbench.layoutControl.enabled": false,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"editor.tabSize": 2,
"editor.mouseWheelZoom": true,
"html.hover.references": false,
"css.hover.references": false,
"less.hover.references": false,
"scss.hover.references": false,
"window.menuBarVisibility": "compact",
"window.zoomLevel": 1,
"editor.tokenColorCustomizations": {
},
"workbench.colorCustomizations": {
"editor.selectionBackground": "#e788ff7c",
"editor.selectionHighlightBackground": "#ff00005b",
"editor.selectionHighlightBorder": "#fbf300e0", ##border when you select
"editor.findMatchBackground": "#f352fe8f",
"editor.findMatchHighlightBackground": "#8e52fe9e",
"editor.findMatchHighlightBorder": "#fbf300e0" ##border when you search for something
}
}
I'm not sure what should I do to fix this issue.
Comments should start with //, not with ##.
VS Code's settings.json follows JSON with Comments (jsonc) mode:
https://code.visualstudio.com/docs/languages/json#_json-with-comments
In addition to the default JSON mode following the JSON specification, VS Code also has a JSON with Comments (jsonc) mode. This mode is used for the VS Code configuration files such as settings.json, tasks.json, or launch.json. When in the JSON with Comments mode, you can use single line (//) as well as block comments (/* */) as used in JavaScript.
In addition, the editor should have shown you that something was wrong.
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'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'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