Test ESlint with prettier plugin on non javascript files

[JPustkuchen]

Check if ESlint currently also works / helps for

• . (DOT) config files like htaccess
• CSS
• SCSS
• HTML
• JSON
• YAML
• Markdown
• Twig
• XML

It would be cool, if it could. Otherwise we should discuss if we need a further plugin, but less is more... :)

As a result all these file types should work "best practice" as they are typically used within Drupal projects.

[JPustkuchen]

I think best would be to create example files of each kind and try to clean them up automatically in a fresh ddev-vscode setup.

If it doesn't work already, we should try to solve it by configuration. If not possible, look for recommended additions.

[joshsedl]

ESLint is Javascript ONLY. It is mainly used for static code analysis NOT for formatting.

If I remember correctly, this issue was mainly opened as we wanted to know whether we should use Prettier or ESLint. As Prettier compare themselves on their own website:

[...] use Prettier for formatting and linters for catching bugs

We are currently using eslint with the prettier and airbnb plugin (since it is the drupal core standard we are using).

To have support for the rest of the file types we should install prettier, move the .prettier.rc from the Drupal core in web and create a prettier ignore file, to ignore .js files, as we already lint them with prettier through eslint.

[JPustkuchen]

Thanks @joshsedl,

move the .prettier.rc from the Drupal core in web and create a prettier ignore file, to ignore .js files, as we already lint them with prettier through eslint

Not really sure about that part. Typically symlinks or even better includes /extends (if .prettier.rc supports that) are used in such cases. Example: https://gitlab.com/pages/nuxt/-/blob/master/.eslintrc.js

Furthermore I'm not sure if excluding is right then. Using prettier + eslint seems to be quite common, are large projects doing it the same way? (react, vue, express, nuxt, ... and other Js frameworks)

[joshsedl]

Furthermore I'm not sure if excluding is right then. Using prettier + eslint seems to be quite common, are large projects doing it the same way? (react, vue, express, nuxt, ... and other Js frameworks)

We are using prettier + eslint for javascript! But we lint and format our javascropt code using ESLINT! Inside our eslint config we add the prettier plugin, to also enable the prettier linting options THROUGH ESLint! So if we also enable the prettier vscode extension and DON'T exclude javascript, the prettier vs-code plugin and the eslint vs-code plugin (using prettier) will both lint the code (a potential formatting problem will be displayed twice).

[joshsedl]

Another option would be, to disable the eslint-prettier plugin in the eslint config. But since this file is provided by Drupal core, I don't want to modify it.

[joshsedl]

Update: Even if ESLint's core functionality is aimed at linting and analysing js code, there are actually a few plugins, that lint other file types like yml for example: https://www.npmjs.com/package/eslint-plugin-yml (used by Drupal core).

[joshsedl]

There doesn't seem any conflict now.