Linting & Auto Fixing for SCSS, Javascript and PHP (and maybe even Twig)

[aaronmeder]

Dear friends of the interweb!

A topic I am struggling quite often with is to get consistent, good, Flynt/Bleech style compliant linting and fixing for all building blocks of a Flynt project: SCSS, Javascript and PHP.

We seem to follow a similar dev setup as you seem to use at Bleech, but also work with some other tech stacks which sometimes leads to compatibility issues in our linting setup, leaving it not working.

Goals

So I've tried, on a fresh vs code / user account, to find a setup that:

• Works with VS Code
• Shows linting errors in VS Code
• Auto fixes what is fixable (on save)
• Is compatible / uses the same rules within VS Code as when using npm run lintFix from the command line

Current State

After some tinkering this seems to be going in the right direction, but still has some issues:

Installed the following extensions in VS Code:

• For SCSS: Stylelint v1.3.0
• For Javascript: StandardJS v2.1.3
• For PHP: PHP Sniffer & Beautifier v0.0.18

.vscode/settings.json in my Flynt directory:

{
  "_comment": "--- Disable VS Code internal linters to prevent duplicate errors ----",
  "css.validate": false,
  "less.validate": false,
  "scss.validate": false,
  "typescript.validate.enable": false,
  "javascript.validate.enable": false,


  "_comment": "--- SCSS: Linting & Fixing with Stylelint ----",
  "stylelint.enable": true,
  "stylelint.validate": ["css", "scss"],
  "editor.codeActionsOnSave": {
    "source.fixAll.stylelint": "explicit"
  },

  "_comment": "--- JS: Linting & Fixing with StandardJS ----",
  "standard.enable": true,
  "standard.run": "onType",
  "standard.autoFixOnSave": true,


  "_comment": "--- PHP: Linting & Fixing with PHP Sniffer & Beautifier ----",
  "phpsab.snifferEnable": true,
  "phpsab.fixerEnable": true,
  "[php]": {
    "editor.formatOnSave": true
  },
 
  "_comment": "--- Flynt: Recommended VS Code settings ----",

  "files.associations": {
    "*.html": "twig"
  },

  "emmet.includeLanguages": {
    "twig": "html"
  },

  "files.exclude": {
    "**/.git": true,
    "**/.svn": true,
    "**/.hg": true,
    "**/CVS": true,
    "**/.DS_Store": true,
    "theme": true,
    "dist": true
  },
}

This works:

• SCSS: ✅ all goals
• Javascript: ✅ all goals
• PHP: 🤷🏻‍♂️ some goals

Problems with PHP Linting/Fixing

Linting and fixing generally also works for PHP. I am however not really sure if its fully working or if the rules just are very relaxed, mainly around code indentation.

With the described setup it seems to be fully relaxed with this:

...which at least I am not 😬 I think it looks very unreadable and messy and would expect it to unify indentation after every bracket for example.

As far as I understand from phpcs.xml.dist it should follow PSR12 rules ("Code MUST use an indent of 4 spaces for each indent level, and MUST NOT use tabs for indenting.").

Ideas?

Do you know if it should be stricter regarding indentation and there is a mistake in my setup or in general: what linting / fixing setup are you guys using?

Have a happy weekend anyone!
Aaron