For 2-3 weeks, while I didn't change anything in prettier file, VSC started changing single quotes to double quotes, while it was always single quotes. I tried many options but it keeps changing it. Heres my .prettierrc
{
"trailingComma": "es5",
"printWidth": 200,
"semi": true,
"singleQuote": true,
"jsxSingleQuote": true,
"tabWidth": 2,
"quoteProps": "as-needed"
}
EDIT: I think, that it is a matter of .tsx files, as prettier has just option for .jsx files but still didn't find a solution.
In .prettierrc, add:
{
"singleQuote": true,
"jsxSingleQuote": true
}
create a .prettierrc file on your root folder and add:
{
"singleQuote": true
}
I have the same issue for a few days. I checked all the settings and they seem to be fine.
At the moment THE ONLY thing that helps is downgrading down to the previous version of Prettier in my case it was version 2.3.0 (I didn't check all the versions between this and the latest but few of them had the same issue)
On your User Settings make sure you have the following line:
"prettier.singleQuote": true
You can access the user settings by CTRL+, on windows or CMD+, on mac.
If you're using the settings GUI just search for single quote and check/uncheck the Prettier: Jsx Single quote and Prettier: Single quote
Best place to read up on this configuration is the website.
https://prettier.io/docs/en/configuration.html
If you are using a package.json, create a new key if you dont have a "prettier" key.
"prettier":{
"singleQuote": true
}
Or you could create a .prettierrc file written in JSON and add the same key pair value.
add tsxSingleQuote: true, in prettierrc.js file
Related
my problem is like this
// #generated by expo-module-scripts
{
"extends": "expo-module-scripts/tsconfig.base",
"compilerOptions": {
"outDir": "./build"
},
"include": ["./src"],
"exclude": ["**/__mocks__/*", "**/__tests__/*", "**/__stories__/*"]
}
desciription
Path to base configuration file to inherit from. Requires TypeScript version 2.1 or later.
File 'expo-module-scripts/tsconfig.base' not found.ts
I also had this error with another expo module, try restarting vs code and see if the problem is correct.
it worked for me, probably an IDE bug
I am using ESLint in my Vue(Nuxt) project in VSCode. When I save I would like my ESLint to run automatically and fix all the warnings for me automatically.
This is my settings.json file in VSCode:
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"vetur.format.defaultFormatter.js": "vscode-typescript",
"vetur.validation.template": false,
"vetur.completion.scaffoldSnippetSources": {},
"vetur.completion.useScaffoldSnippets": false,
"vetur.format.defaultFormatter.html": "none",
"workbench.iconTheme": "material-icon-theme",
"git.autofetch": true,
"git.defaultCloneDirectory": "",
"gitlens.views.repositories.files.layout": "list",
"editor.tabSize": 2,
"editor.detectIndentation": false,
}
And this is my .eslintrc.js file:
module.exports = {
root: true,
env: {
browser: true,
node: true,
},
extends: [
"#nuxtjs",
"plugin:nuxt/recommended",
"../.eslintrc.js"
],
rules: {
//Add custom rules for the frontend here.
//Rules that are common for shared, frontend and backend should go in the parent file
"nuxt/no-cjs-in-config": "off",
},
}
The linked ../.eslintrc.js file contains the following:
module.exports = {
parserOptions: {
parser: 'babel-eslint',
},
plugins: ['jest'],
rules: {
'prefer-const': 'off',
'comma-dangle': ['error', 'always-multiline'],
'prefer-template': 'error',
},
env: {
'jest/globals': true
}
}
Whenever I save the file the warnings just show up and will not automatically fix themselves.
EDIT:
I've turned on verbose output and i'm seeing this in the output:
(node:6832) UnhandledPromiseRejectionWarning: Error: Failed to load plugin 'import' declared in 'frontend\.eslintrc.js » #nuxtjs/eslint-config': Cannot find module 'eslint-plugin-import'
Require stack:
I've then ran yarn add eslint-plugin-import and tried again, it still returns the same error.
Get eslint plugin, add this code to your settings.json
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"eslint.validate": ["javascript"]
}
source
Launch VSCode,
Command + Shift + P, type settings and hit enter, paste and save the following:
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true,
}
}
You're good to go!
I've managed to fix the issue.
The problem was that there were multiple working directories in my solution, which all have their own eslint config.
Putting the following line in the settings.json file of VSCode solved my issue:
"eslint.workingDirectories": [{ "mode": "auto" }]
I tried those solutions and others, and it still didn't work. Actually it was just that ESLint's use had to be approved for use in VSCode. That is, I clicked on the ESLint item on the editor's bottom bar:
Which opened a popup asking me to approve ESLint. After approval autocorrect was running as expected.
Install ESLint extension from the VSCode marketplace.
Once the ESLint extension has installed you may use CTRL + SHIFT + P to open the Command Palette. Search “ESLint fix all auto-fixable Problems” and press enter.
This command would enable eslint to fix the file on save.
In the snap above as you can see that I am getting eslint errors and just to inform you all that despite saving the file, all auto-fixable problems are were not getting fixed by eslint/prettier setup.
So I tried pressing ctrl+shift+p and selecting prettier as default formatter and also tried doing eslint restart server but that didn't worked.
I noticed that vscode was giving me some notifications at the bottom right corner (bell icon). I clicked on that and some list of pop up came up stating that there are multiple formatters installed for the same extension file. Like for example in the below snap there is .jsx file(it had two formatters one was prettier and other was vscodes inbuilt formatter). I clicked on configure button and selected prettier as default and when I saved the file it worked!
If this doesn't works for you then I think this all worked for me because I had eslint npm packages installed in my project that works with prettier to enforce the prettier rules. (these packages are eslint-config-prettier and eslint-plugin-prettier)
I ran into a similar problem-- ESLint was not properly formatting only certain, seemingly random, files on save. Running ESLint --fix would fix the formatting errors, but saving would not. Adding this line to our workspace settings.json fixed the problem:
"eslint.format.enable": true,
Making all our formatter settings look like this:
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll": true
},
"eslint.format.enable": true,
You can also go into the ESLint extension settings and check off the checkbox labeled ESLint > Format:Enable. Worked like a charm!
What fixed it for me was adding this to settings.json, because VSCode didn't know what formatter I wanted to be used on save:
"[javascript]": {
"editor.defaultFormatter": "dbaeumer.vscode-eslint"
},
Check if in the settings.json there are other formatters enabled, in my case I had this by mistake.
"[javascript]": {
"editor.defaultFormatter": "vscode.typescript-language-features"}
After getting the Eslint plugin you need to add this line to the settings.json:
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
}
Still not working? check if your eslint works fine by running this in the terminal:
eslint --ext \".js,.vue\" --ignore-path .gitignore .
If it failed with exit code 2 try removing node modules and install again.
After running this command you should see the eslint errors.
I was dealing with the same issue, and nothing seemed to help, even though I did all the configurations correctly, and ESLint was marking the problems in my files correctly.
For me the solution was to move the .vscode folder to the project root.
Now everything works as intended.
I have no clue what's going on,
I cloned a github repo and literally just tried to change like one line but I got hit by this prettier error which makes no sense to me (I've never used prettier).
Replace ↹return·(⏎↹↹<img·alt='logo'·src='./Logo.png'·/>⏎↹); with ··return·<img·alt="logo"·src="./Logo.png"·/> prettier/prettier
Anything could be helpful at this point, I'm using MacOS and working on VSCode
I had the same issue, in the eslinrc.json file under "prettier/prettier", I removed printWidth.
Let's see why we are getting this error.
If you have installed the prettier extension in your VSCode then the default values are set as mentioned here which can be seen by searching prettier in the settings of VSCode as well.
Now if you have enabled formatOnSave in your VSCode the prettier formats your code based on configs from the VSCode.
This error would occur when the configs from the VSCode conflicts from the configs mentioned in .prettierrc.json or .eslintrc.json.
Ex: Let's say your project is using a printWidth of 100 but the default printWidth is 80. ( Search prettier printwidth in VSCode settings )
In general the spacing errors will be autoCleared ( autoFormatted ) on save by prettier. But in this case that won't work.
Reason: Prettier is sticking to the config ( printWidth: 80 ) which is an error according to Repo's eslintrc/ prettierrc ( printWidth: 100 )
Fix here
Change default VSCode Prettier configs. ❌ -> This would be a bad idea as it will effect all your projects opened in VSCode.
Better way to fix this issue is by adding a .vscode/settings.json in the root directory of the repo.
Add these lines in the settings.json
{
"editor.codeActionsOnSave": { "source.fixAll": true },
"editor.formatOnSave": false,
}
Now go to files with errors and save the files to format. Files will be formatted according to the configs mentioned in project's eslintrc/ prettierrc
Instead of going to each file you can fix all autofixable problems from the command line as below.
Go to package.json and add this line to your scripts.
"lint-fix": "eslint --fix 'src/**/*.{js,jsx,ts,tsx,json,css,scss,md}'",
Now in the terminal run npm run lint-fix.
This is usually due to some configuration with eslint preventing you from making errors and introducing unwanted characters in your code. I fixed this by running one line eslint --fix . . Make sure you install eslint globally first npm i -g eslint .
I think this is caused by Prettier being configured to use spaces instead of tabs to indent and then your code editor using tabs. So Prettier wants you to replace those tabs with spaces.
Alternatively, you can set your code editor to use tabs.
What worked for me was adding this to the rules object in .prettierrc:
{
"useTabs": false
}
You can just set/update this rule in your .eslintrc.js
rules: {
...,
'prettier/prettier': ['error', { printWidth: 120 }],
}
By default, printWidth is 80. ESLint wants to break down the line to match this length requirement that can be overwitten.
I had the same issue, I changed the tab width inside the prettier formatter extension to the configured size.
I added in the .prettierc props "endOfline".
{
"endOfLine": "lf",
}
By default Windows uses CRLF line separator, so you can cahnge it through a global config of IDE to use LF instad of CRLF
I figured the formatting issue (VS Code):
settings.json:
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"editor.defaultFormatter": "dbaeumer.vscode-eslint",
"editor.formatOnSave": true
.eslintrc.json: "useTabs": false}
.editorconfig: indent_style = space
if esbenp.prettier-vscode is enabled in VSCode - please disable it.
See my complete eslint + prettier setup for this repo: https://github.com/Sgryts/ng2-feature-toggle
In my case eslint was preventing Prettier to format the file while saving (I have set my VSCode to format the document upon saving).
Due that, Prettier was complaining about tabs / spaces being added when it was not required.
To fix I had to first fix eslint by using the below command(make sure to install the package globally):
eslint --fix
and then I had to Save the files again so Prettier could format them correctly.
Select all, right click, and select format selection
Try using the following settings:
.editorconfig file
indent_style = tab
indent_size = 2
.pretteierrc file
"tabWidth": 2
Note: reopen vscode after updating this setting.
Also if you have .eslintrc file, make sure that prettier is included in the extends array like this:
"extends": ["standard",..,"prettier"]
For me I had to remove
"extends": "eslint:recommended",
from the .eslintrc.js file in the project.
Please it's 5 hours that I'm just trying to disable this stuff from a cloned repo and still can't do it.
I tried everything but prettier still seems to be working.
I went in the setting and disabled it but it didn't work.
I then tried to go in the .prettierrc and give him a "enable":false bust still nothing
I also tried to just make a .prettierignore and put a * in it but it still works
Just tried to require a config file and delete mine BUT IT STILL WORKS PLEASE WTF
I'm going crazy, I can't believe something that stupid is so difficult to get rid of
Do with .prettierignore and write in that file this code
**
*.js
Just go into .prettierrc.js file in your project(cloned project) "endOfLine": "auto".
your file should look something like this after changes:
module.exports = {
semi: false,
trailingComma: 'all',
singleQuote: true,
printWidth: 100,
tabWidth: 2,
endOfLine: 'auto',
}
Sorry everyone, I've been struggling trying to understand why I need the
/// <reference path="../typings/browser.d.ts" />
module App {
angular.module("app", [""]);
}
I'm using typings and here is my tsconfig:
{
"compilerOptions": {
"experimentalDecorators": true,
"noImplicitAny": false,
"noEmitOnError": true,
"removeComments": false,
"sourceMap": true,
"target": "es5",
"module": "commonjs"
},
"files": [
],
"exclude": [
"node_modules",
"wwwroot"
]
}
I found already several posts about, but every time a different answer and a different scenario.
I use Visual Studio 2015 with ReSharper, TypeScript 1.8.5
Once I remove <reference... tag ReSharper says "Cannot find name 'angular'" but the application runs normally. (probably because it cannot find the intellisense anymore)
Has anyone faced the same problem? Am I missing something?
From the docs on tsconfig:
If no "files" property is present in a tsconfig.json, the compiler
defaults to including all TypeScript (*.ts or *.tsx) files in the
containing directory and subdirectories. When a "files" property is
present, only the specified files are included.
You are using an empty files array ("files": []) which means no files are going to be included in the compiler context. Either add all your references to the files array, or remove the files property completely to allow the compiler to include all TS files in context.
Alternatively, you can use import and export module syntax instead.
I use one _reference.ts file with all referenced *.d.ts lybraries which I use. The typescript compiler use it information for import defenitions about js lybraries. The second case there reference are used is managing the order of ts files include into resulting js file. Another words if you add reference in file B.ts to A.ts in resulting js will be contains A.js first and B after. It's not often needed because TSC is smart and ordered file by types using but some times It's usefull then you use some suff from A.ts in B.ts dynamicly (not stronrly typed).