Linting configuration

Development
1

I’m seeing a significant difference in default linting configuration, and the way it supposed to work.

The default configuration installs the eslint-config-discourse package as a dev devendency:

https://www.npmjs.com/package/eslint-config-discourse

However, when I look for the source code at https://github.com/discourse/eslint-config-discourse the repository redirected to @discourse/lint-configs; which is also a package under eslint-config-discourse monorepo. With the included tests eslint-config-discourse supposed to be a wrapper I think, but it is not working as it supposed to be, at least not in my experience:

Default Linting Config

  1. Create a new theme using discourse_theme new command.
  2. Review generated linting configuration:
    a. .eslintrc
    {
  "extends": "eslint-config-discourse",
  "globals": {
    "settings": "readonly",
    "themePrefix": "readonly"
  }
}
    b. .template-lintrc.js:
    module.exports = {
  plugins: ["ember-template-lint-plugin-discourse"],
  extends: "discourse:recommended",
};
    c. package.json
    {
  "license": "MIT",
  "devDependencies": {
    "eslint-config-discourse": "latest"
  }
}
  3. Run Prettier on the package, and it will complain about the *.gjs files:
    yarn prettier --check --write "{common,javascripts,desktop,mobile,test,scss}/**/*.{js,gjs,es6,scss}"
    Error: No parser could be inferred for file ... .gjs

Configure @discourse/lint-configs directly

https://www.npmjs.com/package/@discourse/lint-configs

  1. Run yarn remove -D eslint-config-discourse to uninstall the package.
  2. Run yarn add -D @discourse/lint-configs to install as dev dependency
  3. Follow the instructions to create linting configuration files:
    a. Replace .eslintrc file with .eslintrc.cjs
    module.exports = require("@discourse/lint-configs/eslint-theme");
    b. Add .prettierrc.cjs file:
    module.exports = require("@discourse/lint-configs/prettier");
    c. Replace .template-lintrc.js file with .template-lintrc.cjs:
    module.exports = require("@discourse/lint-configs/template-lint");
  4. Try running Prettier again, and observe that it works without errors:
    $ yarn prettier --check --write "{common,javascripts,desktop,mobile,test,scss}/**/*.{js,gjs,es6,scss}"
Checking formatting...
All matched files use Prettier code style!
✨  Done in 0.46s.

So, should I presume discourse_theme CLI is outdated, and moving forward I should use the @discourse/lint-configs option in my projects?

4

No. Trust that. Submit to your repo and see the linting commands when yours fails to pass.

5

Hi @pfaffman,

I did a little test on my repo. While both cases pass the completion, the default config generates an error for the GJS file, and it is not scanned.

On the second approach, the GJS file recognized, and linted successfully.

Please compare the main branch actions with linting branch actions; I only introduced the configs of second option in the linting branch:

main:
https://github.com/gormus/discourse-filtered-topic-lists/actions/runs/10325377606/job/28586838134?pr=1#step:6:19

Screenshot 2024-08-11 at 2.37.55 PM
Screenshot 2024-08-11 at 2.37.55 PM1414×792 59.1 KB

linting:
https://github.com/gormus/discourse-filtered-topic-lists/actions/runs/10333473217/job/28605865585?pr=3#step:6:17

Screenshot 2024-08-11 at 2.38.47 PM
Screenshot 2024-08-11 at 2.38.47 PM1416×789 54 KB

6

It shouldn’t. The latest version of the discourse_theme CLI will clone GitHub - discourse/discourse-theme-skeleton: Template for Discourse themes and adapt it based on your inputs. That uses @discourse/lint-configs

Update instructions are here:

7

Thanks, this was it. Now I can get a version (previously I didn’t get version):

discourse_theme --version
2.1.2

…and an updated commands list:

discourse_theme --help
Usage: discourse_theme COMMAND [DIR] [OPTIONS]

Commands:
  new DIR               - Creates a new theme in the specified directory.
  download DIR          - Downloads a theme from the server and stores it in the specified directory.
  upload DIR            - Uploads the theme from the specified directory to Discourse.
  watch DIR             - Watches the theme in the specified directory and synchronizes any changes with Discourse.
  rspec DIR [OPTIONS]   - Runs the RSpec tests in the specified directory. The tests can be run using a local Discourse repository or a Docker container.
    --headful           - Runs the RSpec system type tests in headful mode. Applies to both modes.

    If specified directory has been configured to run in a Docker container, the additional options are supported.
    --rebuild           - Forces a rebuilds of Docker container.
    --verbose           - Runs the command to prepare the Docker container in verbose mode.

Global Options:
  --reset               - Resets the configuration for the specified directory.

and of course the generated skeleton is newer. :smiley: