i had the same issue.
In your root workspace you have a .vscode folder with a settings.json.
Add the following:
{
"eslint.workingDirectories": [
"./{PATH_TO_CLIENT}" // replace {PATH_TO_CLIENT} with your own path
]
}
related issue: create-react-app subfolder projects do not lint
Answer from Julez on Stack Overflowi had the same issue.
In your root workspace you have a .vscode folder with a settings.json.
Add the following:
{
"eslint.workingDirectories": [
"./{PATH_TO_CLIENT}" // replace {PATH_TO_CLIENT} with your own path
]
}
related issue: create-react-app subfolder projects do not lint
VSCode/eslint will not pick newly installed npm packages in the node_modules directory. After running npm i eslint-plugin-prettier restart the VSCode workspace. Happens to me consistently, every time I setup a new Javascript/Node/React project and add eslint & prettier, using this guide in the order it suggests.
Prettier is a peer dependency of @vue/eslint-config-prettier so you need to add it to your own dependencies:
Copynpm install --save-dev prettier
if you're using yarn 3, and yarn add --dev prettier doesn't solve your problem, try this:
cmd+shift+p- in the dropdown, search for
preferences: open user settings (json) - add
"prettier.prettierPath": ".yarn/sdks/prettier/index.js"to your json file.
This tells your editor to find the module in the path you added.
NOTE: If there is not sdks directory in .yarn make sure to run the following command for the first time to generate the related directories.
The latest version and workflow is for Yarn 4.0.0-rc.48
Copyyarn dlx @yarnpkg/sdks base
You can read more about editor sdks in the doc
» npm install eslint-plugin-prettier
Had the same issue. To solve it, I downgraded eslint from version 8.3.0 to
"eslint": "^7.32.0",
"eslint-config-prettier": "^7.2.0",
"eslint-plugin-prettier": "^3.4.1",
I got the exact same problem. I solved this issue by removing existing eslint-config-prettier and eslint-plugin-prettier from package.json. Then after re-installed with yarn (or npm) as dependencies (not as dev-dependencies). Then again I pushed it to heroku, it worked!
» npm install prettier-eslint
» npm install eslint-config-prettier
so ive been messing around with create-react-app, ive probably set it up dozens of times now to try to debug why prettier wont work. I also get a bunch of vulnerabilities in the console once i do install prettier (but it still wont work). here is my process.
npx create-react-app test npm install --save-dev --save-exact prettier 1. added 1 package, and audited 1497 packages in 2s 236 packages are looking for funding run `npm fund` for details 74 vulnerabilities (69 moderate, 5 high) To address issues that do not require attention, run: npm audit fix To address all issues (including breaking changes), run: npm audit fix --force Run `npm audit` for details.
ignore the warnings and make a new .prettierrc.json in the root directory of the project. I paste the following into the prettier config:
{
"semi": true, "singleQuote": true, "tabWidth": 2, "trailingComma": "es5", "printWidth": 80 }I add .eslintrc.json to the root directory as well, and then i add this to it:
{ "extends": ["react-app", "react-app/jest", "plugin:prettier/recommended"], "rules": {
"prettier/prettier": ["error"] } } i press ctrl + , to make sure format on save is checked in the settings of vscode. i also make sure that the prettier extension is installed from the vs code store
I open and close back vscode, make a bad formatting on purpose like :
let x_______________ = 5. (the ____ are spaces with spacebar)
and i expect that when i press ctrl + s, it will remove the spaces, or even add the semicolon at the end, but it doesnt. prettier doesnt work at all. here is my repo: https://github.com/ForkEyeee/test
i guess my questions are: why do i get all of those vulnerabilties? is this normal cause all i do is start a new cra, then install prettier and i get so many errors. also, cra supports eslint out of the box, but not prettier, so is my install process of prettier correct. i even tried vite briefly and i had the same issue as webpack.