Code linting and formatting with prettier

dev
1

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

10 Likes
2

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

1 Like
3

I personally use prettier-atom which automatically fix the errors on save and linter-eslint which provides JIT notifications on whether I broke any eslint rules.

5 Likes
4

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

3 Likes
5

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

1 Like
6

It doesn’t run prettier though :frowning:

7

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

3 Likes