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: 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: 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: .../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: 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: 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 👮♀️ 👮 For a more automated way to integrate ESLint and Prettier with your edit, see [image] Prettier : code formatting tool Development When creating a pull request to our main Discourse repository, you might have noticed a bot sending this message in the comments: [01] 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…

I personally use Sunsetting Atom - The GitHub Blog which automatically fix the errors on save and Sunsetting Atom - The GitHub Blog which provides JIT notifications on whether I broke any eslint rules.

Rubocop is related but not the same thing, we should definitely add nice links to the op pointing at each other

I recommend installing overcommit which adds hooks to your git repository and runs the linters (Rubocop and EsLint) on changed files before each commit.

It doesn’t run prettier though :frowning:

It could be added: https://github.com/juriewessels/overcommit-prettier But I haven’t looked into it, because my IDE is running prettier. :wink:

Code linting and formatting with prettier

Development

pfaffman (Jay Pfaffman) July 24, 2018, 5:14am 2

I think you’re looking for Rubocop has landed on Discourse 👮‍♀️ 👮.

Topic		Replies	Views
Prettier : code formatting tool Development	4	6472	June 3, 2019
Help configuring rubocop, eslint, and so on in vscode and the command line Marketplace	2	875	August 29, 2023
Travis tests failing due to eslint Development	7	1220	September 10, 2020
Automatically lint and format code before commits Developer Guides how-to , code	0	1933	November 8, 2019
Linting consistency Development	9	447	December 2, 2025

Code linting and formatting with prettier

Related topics