Help us choose JS coding standards!

[eldadfux]

Currently we are using the PHP-FIG for our PHP coding standards but we don't have any standards to follow when it comes to JS code writing.

What in your opinion will be most suitable? It is important that the new standards we will use will be popular in the community and will have great good ecosystem around them.

[TheDoctor0]

I would suggest Airbnb Javascript Style Guide.

Currently we are using the PHP-FIG for our PHP coding standards

I checked the source code and it seems that PSR-1 basic standard rules were mostly ignored, which violates requirements for PSR-2 / PSR-12.
I see that PHP 7.3+ is required, but features such as type hinting for parameters or null coalesce operator are not really being used.

[eldadfux]

Hi @TheDoctor0, Thanks for the feedback!

I will run, php-cs-fixer on the current code base, to make sure all code is consisted with psr-1 and psr-2.

As I mentions in the contributors guidelines, I haven't really reviewed PSR-12 yet, but I hope to do so in the upcoming days.

Are there any tools like php-cs-fixer that can help us fix the current JS code to match the Airbnb style guide?

[TheDoctor0]

You can use ESLint with Airbnb config.

[eldadfux]

Great, I will give it a try.

I have also just finished to commit all the changes that the PHP-CS-FIXER applied to the code to make it more compatible to the PSR-1+2.

[nati-levi]

@eldadfux I also recommend, like the doctor, on ESLint.
We in climacell use the rules of Airbnb, together with jest (for testing), and add some of our own taste. you can see the config here if you like:

module.exports = {
    "parser": require.resolve("babel-eslint"),
    "extends": [
        require.resolve("eslint-config-airbnb"),
        "plugin:jest/recommended"
    ],
    "plugins": ["jest"],
    "globals": {
        "document": true,
        "window": true,
        "describe": true,
        "it": true,
        "expect": true,
        "localStorage": true,
        "MutationObserver": true,
        "fetch": true,
        "Image": true
    },
    "rules": {
        "no-plusplus": "off",
        "linebreak-style": "off",
        "no-underscore-dangle": "off",
        "class-methods-use-this": "off",
        "react/prop-types": "off",
        "react/jsx-filename-extension": "off",
        "import/prefer-default-export": "off",
        "import/no-default-export": "error",
        "jsx-a11y/media-has-caption": "off",
        "max-len": [
            "error",
            {
                "code": 120
            }
        ],
        "no-param-reassign": [
            "error",
            {
                "props": false
            }
        ],
        "indent": [
            "error",
            4,
            {
                "SwitchCase": 1
            }
        ],
        "import/no-extraneous-dependencies": [
            "error",
            {
                "devDependencies": true
            }
        ],
        "react/jsx-indent": [
            "error",
            4
        ],
        "react/jsx-indent-props": [
            "error",
            4
        ],
        "object-curly-newline": "off",
        "react/no-did-mount-set-state": "off",
        "react/jsx-one-expression-per-line":  "off",
        "jsx-a11y/label-has-for": "off"
    }
};

[eldadfux]

Thanks for the feeback @nati-levi ! seems like airbnb is the industry favourite...

[millette]

https://prettier.io/ is also a popular option. It not only lints but reformats, supporting js, css, html, markdown and even php via a plugin.

[Daniellunsc]

Another point to Eslint + Airbnb style guide, most projects today i use it and seems very popular.

[mgkimsal]

https://prettier.io/ is also a popular option. It not only lints but reformats, supporting js, css, html, markdown and even php via a plugin.

Have had good success working with prettier.io as well (both for PHP and JS).

[danyalasif]

Voting for prettier too, ever since it makes code seamless across multiple people, you can set up auto-formatting whenever someone pushes code too which at least standardizes the coding conventions!

[eldadfux]

Hi guys! Thanks you all for the great advices! I have just formatted all of our entire JS codebase with prettier thanks to the easy integration with VS Code.

The fact that it can also support our PHP codebase can be a great bonus and although the Airbnb standard seems very popular, It seems more logical to go with the open-source project standard.