I'm really not sure what's happening. The live server keeps defaulting to something it isn't on port 5501 so I searched stack overflow and found this help for the problem
but when I go to settings.json it looks different and on closer inspection it looks like the settings for a different extension (prettier).
{
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"workbench.colorTheme": "Monokai",
"liveServer.settings.donotShowInfoMsg": true,
"window.zoomLevel": 0,
"files.autoSave": "off",
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[css]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"security.workspace.trust.untrustedFiles": "open",
"liveServer.settings.CustomBrowser": "chrome",
"[typescriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"files.associations": {
"*.php": "php"
},
"liveServer.settings.useLocalIp": true
}
I've tried uninstalling prettier and live-server(and live sass) but all that happens is the file stays the same and it doesn't recognize the "esbenp.prettier-vscode".
I am relatively new to programming and have no idea what's happening?
I'm guessing if I can just get a copy of the correct settings.json I can copy, paste, save it and it'll work? but I can't find the file on the github page.
Can anyone help me out?
Thanks
EDIT: below is my current code
{
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"workbench.colorTheme": "Monokai",
"liveServer.settings.donotShowInfoMsg": true,
"window.zoomLevel": 0,
"files.autoSave": "off",
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[css]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"security.workspace.trust.untrustedFiles": "open",
"liveServer.settings.CustomBrowser": "chrome",
"[typescriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"files.associations": {
"*.php": "php"
},
"liveServer.settings.multiRootWorkspaceName": "",
"liveServer.settings.port": 0
}
Related
Getting this error:
Extension 'Prettier - Code formatter' is configured as formatter but it cannot format 'TypeScript React'-files
I've tried in all types of files including typescriptreact, javascriptreact, javascript, etc.
To be more specific, I am using ESLint with Prettier for a NextJS13 app. Below are my settings.json
"files.autoSave": "afterDelay",
"[php]": {
"editor.defaultFormatter": "bmewburn.vscode-intelephense-client"
},
"[erb]": {
"editor.defaultFormatter": "aliariff.vscode-erb-beautify"
},
"javascript.updateImportsOnFileMove.enabled": "always",
"git.autofetch": true,
"editor.fontSize": 16,
"eslint.format.enable": true,
"python.formatting.provider": "black",
"[python]": {
"editor.defaultFormatter": "ms-python.python"
},
"editor.fontFamily": "JetBrains Mono",
"editor.accessibilitySupport": "off",
"editor.defaultFormatter": "esbenp.prettier-vscode",
"workbench.iconTheme": "vscode-icons",
"editor.formatOnPaste": true,
"editor.formatOnSave": true,
"terminal.integrated.env.osx": {
"FIG_NEW_SESSION": "1"
},
"snyk.yesWelcomeNotification": false,
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[ruby]": {
"editor.defaultFormatter": "rebornix.ruby"
},
"bracket-pair-colorizer-2.depreciation-notice": false,
"eslint.workingDirectories": [
"./react-client"
],
I want to use ESLint along with Prettier. Everything is fine except when I press Ctrl + S to save the file, Prettier changes file in a way which is not compatible with prettier/prettier rule in ESLint.
Content of .vscode/settings.json:
{
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"prettier.singleQuote": true,
"prettier.printWidth": 70,
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"eslint.alwaysShowStatus": true,
"eslint.codeAction.showDocumentation": {
"enable": true
},
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"eslint.validate": ["javascript"]
}
Content of .eslint.json:
{
"env": {
"browser": true,
"es2021": true
},
"extends": ["google", "prettier"],
"parser": "#typescript-eslint/parser",
"parserOptions": {
"ecmaVersion": "latest",
"sourceType": "module"
},
"plugins": ["#typescript-eslint", "prettier"],
"rules": {
"prettier/prettier": ["error"]
}
}
I know if I remove "editor.formatOnSave": true, from settings.json all of problems get resolved but I don't like the saved format because lines of code are too long and I like to break long line into multiple line.
The problem is that Prettier is using printWidth of 70 characters but ESlint have a max-len of 80 characters.
You should modify one of them to keep them sync, e.g. you can change printWidth inside settings.json to make Prettier compatible with ESlint("prettier.printWidth": 80).
Content of ./vscode/settings.json:
{
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"prettier.singleQuote": true,
"prettier.printWidth": 80,
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"eslint.alwaysShowStatus": true,
"eslint.codeAction.showDocumentation": {
"enable": true
},
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"eslint.validate": ["javascript"]
}
I got a formatting issue, please help me guys. When I Ctrl+S a .js file, it turn to indent Tab for a moment then turn indent to Space. Yes I have tried to set Tabs size to 2 and uncheck Insert Space in settings but no use. Here is my settings.json file. I use Prettier for default code formatter.
{
//"editor.formatOnSave": true,
"editor.formatOnType": true,
"editor.tabSize": 2,
"prettier.singleQuote": true,
"prettier.useTabs": true,
"terminal.integrated.defaultProfile.windows": "Git Bash",
"editor.fontWeight": "normal",
"editor.defaultFormatter": "esbenp.prettier-vscode",
"liveServer.settings.donotShowInfoMsg": true,
"workbench.startupEditor": "none",
"workbench.iconTheme": "vscode-icons",
"editor.guides.bracketPairs": true,
"[css]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"prettier.printWidth": 72,
"prettier.useEditorConfig": false,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"html.customData": ["snippet"],
"html.format.indentInnerHtml": true,
"git.autofetch": true,
"eslint.codeActionsOnSave.rules": null,
"eslint.workingDirectories": [
{
"mode": "auto"
}
],
"editor.parameterHints.enabled": false,
"vetur.completion.scaffoldSnippetSources": {
"workspace": "💼",
"user": "🗒️",
"vetur": "✌"
},
"[vue]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"workbench.editorAssociations": {
"*.sqlite": "sqlite-viewer.option"
},
"vsicons.dontShowNewVersionMessage": true,
"[python]": {
"editor.defaultFormatter": "ms-python.python"
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"diffEditor.ignoreTrimWhitespace": false,
"bracket-pair-colorizer-2.depreciation-notice": false,
"editor.suggest.showKeywords": false,
"vetur.format.options.useTabs": false,
"sync.autoDownload": true,
"editor.comments.insertSpace": false,
"editor.detectIndentation": true,
"editor.tabCompletion": "on",
"editor.trimAutoWhitespace": false
}
I'm a little confused as to why this line :
/** #format */
Always appears at the top of my .js files when i save. I have prettier globally installed as well as the prettier extension installed in vs code, I have it configured to auto format on save as well. I can't find any info on how to make that line go away or what caused it to start showing up in the first place.
Here is what my settings.json file looks like in vs code:
{
"editor.tabSize": 2,
"editor.insertSpaces": true,
"files.trimTrailingWhitespace": true,
"materialTheme.fixIconsRunning": false,
"workbench.colorTheme": "Winter is Coming (Dark Blue)",
"explorer.confirmDragAndDrop": false,
"explorer.confirmDelete": false,
"workbench.iconTheme": "material-icon-theme",
"files.autoSave": "off",
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
},
"[jsx]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
},
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
},
"[typescriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
},
"[tsx]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
},
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
},
"[prisma]": {
"editor.defaultFormatter": "Prisma.prisma",
"editor.formatOnSave": true
},
"diffEditor.ignoreTrimWhitespace": true,
"liveshare.featureSet": "insiders",
"material-icon-theme.activeIconPack": "react",
"material-icon-theme.files.associations": {},
"workbench.startupEditor": "newUntitledFile",
"editor.snippetSuggestions": "bottom",
// "editor.quickSuggestions": null
"editor.quickSuggestionsDelay": 500,
"prettier.jsxSingleQuote": true,
"prettier.singleQuote": true,
"mssql.connections": [
{
"server": "{{put-server-name-here}}",
"database": "{{put-database-name-here}}",
"user": "{{put-username-here}}",
"password": "{{put-password-here}}"
}
],
"window.zoomLevel": -2,
"cSpell.userWords": [
"Signup",
"formik"
],
"prettier.insertPragma": true,
"settingsSync.ignoredExtensions": [
"esbenp.prettier-vscode"
]
}
For anyone running into the same issue, in the settings.json file, I changed this:
"prettier.insertPragma": true,
to false
"prettier.insertPragma": false,
that resolves the issue.
My settings.json file shows 3 problems with my settings but I can't find it. My settings is below -
{
"telemetry.enableTelemetry": false,
"window.zoomLevel": 1,
"workbench.iconTheme": "material-icon-theme",
"workbench.colorTheme": "Community Material Theme Ocean",
"explorer.confirmDelete": false,
"javascript.validate.enable": false,
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"files.associations": {
"*.js": "javascriptreact"
},
"editor.formatOnSave": true,
"git.enableSmartCommit": true,
"liveServer.settings.https": {
"enable": true
},
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
}
so I just removed this part
"liveServer.settings.https": {
"enable": true
},
and now no problem is showing. but don't know why