# Code-Linting und Formatierung mit Prettier
**URL:** https://meta.discourse.org/t/code-linting-and-formatting-with-prettier/92981
**Category:** Development
**Created:** [24. Juli 2018 um 02:31 UTC](https://meta.discourse.org/t/code-linting-and-formatting-with-prettier/92981 "2018-07-24T02:31:36Z")
**Posts on this page:** 7
**Page:** 1
### Author:  [@pmusaraj](https://meta.discourse.org/u/pmusaraj)
#### Post date: [24. Juli 2018 um 02:31 UTC](https://meta.discourse.org/t/code-linting-and-formatting-with-prettier/92981/1 "2018-07-24T02:31:36Z")
I just wrote a PR that didn’t pass the Travis tests due to linting issues. I couldn’t find any entries in meta that discussed eslinting/prettier, so I went digging around the code and found out how to improve my code to fit with the styling and listing standards of Discourse. This may be useful for others, so here’s a log of what I did:
First, to install ESLint and prettier locally. I ran:
```plaintext
yarn install
```
and that installed all the dev dependencies listed in `package.json`. Depending on which part of Discourse you’re working on, you may need to run one of these commands to check for issues:
```plaintext
yarn eslint --ext .es6 app/assets/javascripts
yarn eslint --ext .es6 test/javascripts
yarn eslint --ext .es6 plugins/**/assets/javascripts
yarn eslint --ext .es6 plugins/**/test/javascripts
yarn eslint app/assets/javascripts test/javascripts
```
I was working on an improvement to core, so the first line above found my issues. When ESLint finds an error, the output is fairly clear, for example I got something like this:
```plaintext
.../discourse/app/assets/javascripts/discourse/models/user-stream.js.es6
5:8 error 'UserActionGroup' is defined but never used no-unused-vars
```
I fixed the issue by removing the unused variable, and then ESLint passed on a second try.
**Prettier is similar**. In `lib/tasks/docker.rake`, I found the following command:
```plaintext
yarn prettier --list-different "app/assets/stylesheets/ **/*.scss" "app/assets/javascripts/** /*.es6" "test/javascripts/**/*.es6"
```
This showed me the filenames for which prettier found formatting offenses. To fix them, I ran:
```plaintext
yarn prettier [filename] --write
```
After running that command for the 2-3 files that had issues, I committed, pushed, and waited for Travis to pass (thankfully, it did!).
* * *
For Ruby linting, see [Rubocop has landed on Discourse 👮♀️ 👮](https://meta.discourse.org/t/rubocop-has-landed-on-discourse-policewoman-policeman/67211)
For a more automated way to integrate ESLint and Prettier with your edit, see
> [@Prettier : code formatting tool](https://meta.discourse.org/t/prettier-code-formatting-tool/93212):
>
> When creating a pull request to our main Discourse repository, you might have noticed a bot sending this message in the comments: We have been using Prettier on our codebase for a few weeks now, and are enforcing it in pull request too now. What is prettier? Prettier is an automatic code formatter. It will make sure all JS code follows established standards. How to use it? We recommend you set up your code editor to format on file save. We use the default prettier options. It will dep…
---
### Author:  [@pfaffman](https://meta.discourse.org/u/pfaffman)
#### Post date: [24. Juli 2018 um 05:14 UTC](https://meta.discourse.org/t/code-linting-and-formatting-with-prettier/92981/2 "2018-07-24T05:14:51Z")
I think you’re looking for [Rubocop has landed on Discourse 👮♀️ 👮](https://meta.discourse.org/t/rubocop-has-landed-on-discourse-policewoman-policeman/67211).
---
### Author:  [@tgxworld](https://meta.discourse.org/u/tgxworld)
#### Post date: [24. Juli 2018 um 05:17 UTC](https://meta.discourse.org/t/code-linting-and-formatting-with-prettier/92981/3 "2018-07-24T05:17:10Z")
I personally use [Sunsetting Atom - The GitHub Blog](https://atom.io/packages/prettier-atom) which automatically fix the errors on save and [Sunsetting Atom - The GitHub Blog](https://atom.io/packages/linter-eslint) which provides JIT notifications on whether I broke any eslint rules.
---
### Author:  [@sam](https://meta.discourse.org/u/sam)
#### Post date: [24. Juli 2018 um 05:36 UTC](https://meta.discourse.org/t/code-linting-and-formatting-with-prettier/92981/4 "2018-07-24T05:36:50Z")
Rubocop is related but not the same thing, we should definitely add nice links to the op pointing at each other
---
### Author:  [@gerhard](https://meta.discourse.org/u/gerhard)
#### Post date: [24. Juli 2018 um 09:50 UTC](https://meta.discourse.org/t/code-linting-and-formatting-with-prettier/92981/5 "2018-07-24T09:50:49Z")
I recommend installing [overcommit](https://github.com/brigade/overcommit) which adds hooks to your git repository and runs the linters (Rubocop and EsLint) on changed files before each commit.
---
### Author:  [@zogstrip](https://meta.discourse.org/u/zogstrip)
#### Post date: [24. Juli 2018 um 09:52 UTC](https://meta.discourse.org/t/code-linting-and-formatting-with-prettier/92981/6 "2018-07-24T09:52:16Z")
It doesn’t run prettier though ☹
---
### Author:  [@gerhard](https://meta.discourse.org/u/gerhard)
#### Post date: [24. Juli 2018 um 09:54 UTC](https://meta.discourse.org/t/code-linting-and-formatting-with-prettier/92981/7 "2018-07-24T09:54:28Z")
It could be added: [https://github.com/juriewessels/overcommit-prettier](https://github.com/juriewessels/overcommit-prettier)
But I haven’t looked into it, because my IDE is running prettier. 😉