question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

"Crash" when used with prettier and eslint

See original GitHub issue

Please see https://github.com/sveltejs/svelte/issues/3550 for details, though is closed there. I copied the original bug report here, thanks

Describe the bug With this template where we want ESLint to co exist with prettier I have 2 problems when the plugins are nebale with this config

As described in the prettier docs this enable ESLint to call prettier

  1. Lint crashes in the svlte compile - see stack trace
  2. Prettier fails to format on save the App.svelte file - and error flashes up in the status bar

Logs see stack trace

To Reproduce Uncommented the line aboveand comment the one above it

  1. Run npm run lint from the command line
  2. edit the App.svelte and save the file

Expected behavior

  1. no error and llinter succeeds
  2. File is reformated via prettier

Stacktraces

Stack trace

$ npm run lint

svelte-project@1.0.0 lint C:\projects\svelte-code-cypress-project eslint src/*

ParseError: Expected } 1 | export let name 2 |

3 | {name;name=0} | ^ Occurred while linting C:\projects\svelte-code-cypress-project\src\App.svelte:3 at error$1 (C:\projects\svelte-code-cypress-project\node_modules\svelte\compiler.js:13329:20) at Parser$2.error (C:\projects\svelte-code-cypress-project\node_modules\svelte\compiler.js:13405:10) at Parser$2.eat (C:\projects\svelte-code-cypress-project\node_modules\svelte\compiler.js:13419:19) at mustache (C:\projects\svelte-code-cypress-project\node_modules\svelte\compiler.js:13220:17) at new Parser$2 (C:\projects\svelte-code-cypress-project\node_modules\svelte\compiler.js:13364:22) at Object.parse$1 [as parse] (C:\projects\svelte-code-cypress-project\node_modules\svelte\compiler.js:13495:21) at Object.parse (C:\projects\svelte-code-cypress-project\node_modules\prettier-plugin-svelte\plugin.js:669:51) at Object.parse$2 [as parse] (C:\projects\svelte-code-cypress-project\node_modules\prettier\index.js:10629:19) at coreFormat (C:\projects\svelte-code-cypress-project\node_modules\prettier\index.js:13888:23) at format (C:\projects\svelte-code-cypress-project\node_modules\prettier\index.js:14146:73) npm ERR! code ELIFECYCLE npm ERR! errno 2 npm ERR! svelte-project@1.0.0 lint: eslint src/* npm ERR! Exit status 2 npm ERR! npm ERR! Failed at the svelte-project@1.0.0 lint script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\steve\AppData\Roaming\npm-cache_logs\2019-09-11T17_00_42_583Z-debug.log

Information about your Svelte project:

  • Your browser and the version: (e.x. Chrome 52.1, Firefox 48.0, IE 10) Not relevant - build error

  • Your operating system: (e.x. OS X 10, Ubuntu Linux 19.10, Windows XP, etc) Windows 10 latest 1903

  • Svelte version (Please check you can reproduce the issue with the latest release!) 3.12.1

  • Whether your project uses Webpack or Rollup Roll up

Severity How severe an issue is this bug to you? Is this annoying, blocking some users, blocking an upgrade or blocking your usage of Svelte entirely?

Serious - can’t lint or run prettier on svelte files

Additional context Add any other context about the problem here.

Issue Analytics

  • State:open
  • Created 4 years ago
  • Reactions:15
  • Comments:17 (6 by maintainers)

github_iconTop GitHub Comments

10reactions
boojumcommented, Apr 20, 2020

I think that I’m facing the same issue. I’m linting with eslint taking advantage of the prettier/recommended rules set. After adding eslint-plugin-svelte3 everything was still working as it should. As soon as I added prettier-plugin-svelte it stopped. This snippet:

<script>
  export let name
</script>

… is causing eslint to fail with:

npx eslint --fix ./src/**/*.{js,svelte}
Expected }
  1 | export let name
  2 | 
> 3 | {name;name=0}
    |     ^
Occurred while linting /home/boojum/code/playground/parcel-svelte/src/containers/App/App.svelte:3

Repo with the minimal setup required to reproduce is here. To reproduce, simply run npx eslint --fix ./src/**/*.{js,svelte} - it will fail with the above error. Then uninstal prettier-plugin-svelte and run eslint again - no problems at all.

6reactions
dummdidummcommented, Jan 6, 2021

As stated in the newest Prettier docs, using packages like eslint-plugin-prettier is no longer recommended. Instead, use a preset configuration which turns off all Eslint rules which conflict with prettier and then just format first with prettier and run the linter afterwards.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Prettier and eslint indents not working together
ESLint's indent rule and Prettier's indentation styles do not match - they're completely separate implementations and are two different ...
Read more >
Integrating with Linters
Most stylistic rules are unnecessary when using Prettier, but worse – they might conflict with Prettier! Use Prettier for code formatting concerns, and...
Read more >
ESLint and prettier crash course | bangla tutorial - YouTube
In this video, I will show how to set up eslint and prettier together in a project when working with your teammates.
Read more >
Prettierrc Configuration - Prettier vs Eslint - YouTube
Learn correct Prettierrc configuration for any project. Prettier is the most needed tool that I use in every single project.
Read more >
How to add ESlint, Prettier, and Husky (Git Hook) in React ...
I always used eslint & prettier in my vscode, so I never faced this issue about formatting ... You can quickly do a...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found