Enforce good code style with ESLint and EditorConfig

ESLint

Most code editors support plug-ins for linting. ESLint plugin is a useful plug-in for Microsoft Visual Studio Code. Code editor plug-ins highlight errors in the editor so they can be seen and fixed during development. When all the developers in a team use a plug-in, it helps to maintain a consistent code style.

If you use Microsoft Visual Studio Code, the provided configuration files prompt you to install the recommended ESLint plug-in for code styling. If you use a different editor, you can manually configure the plug-in. For example, for Atom you can configure the Atom ESLint plug-in.

The first time that you run a static code analyzer on your code, particularly if coding style was not previously enforced, you might see numerous errors. Don't get discouraged, while it might take some time to fix all of the violations, ensuring that your team uses a consistent coding style has significant long-term benefits.

The ESLint configuration is in the ./node_modules/@spm/eslint-config/index.js file.

Running ESLint

To check the code for ESLint violations, run the following command in the application root directory. Errors are listed in the console.

npm run lint

Fixing ESLint violations

Run the following command for ESLint to fix syntactic problems automatically:

npm run lint -- --fix

You must manually fix any violations that can't be resolved automatically.

Overriding ESLint config rules in the sample config

The sample .eslintrc.js file in the universal-access-sample-app is used for linting by default when you run ESLint through an npm script or by using an editor ESLint plug-in. The sample extends the configuration file in the spm-eslint-config package, which contains a set of predefined coding style rules. You can override rules that are inherited from this configuration file by using the instructions at https://eslint.org/docs/user-guide/configuring/configuration-files#configuration-based-on-glob-patterns.

An example of overriding a rule is shown.

module.exports = {
  extends: ["./node_modules/@spm/eslint-config/index.js"],
  overrides: [
    {
      files: ['src/**/*.js'],
      rules: {
        // 0 is off / 1 is warn / 2 is error
        'react-hooks/exhaustive-deps': 2,       
      },
    },
  ],
};

EditorConfig

EditorConfig helps maintain consistent coding styles for multiple developers who work on the same project. The .editorconfig EditorConfig setup file is in the root directory of the sample application.

The included EditorConfig configuration file ensures consistent coding style when it comes to indentation, spacing, and quotation types. For more information about available Editor Config plug-ins, see the EditorConfig downloads.

Automation

If you have a CD/CI pipeline, you can include linting as part of the testing phase. It is a good idea to correct code with linting issues before you merge it into the codebase.