For coders TYPO3 Tech Corner

Increase JavaScript code quality in 10 easy steps.

Increase JavaScript code quality in 10 easy steps.

The code quality of Javascript and CSS files comes to the fore, especially in larger projects. Huge code that is difficult to maintain becomes the nightmare of every developer who has to deal with the project in the future. It is therefore all the more important to ensure a uniform code base already during development. In this article, you will learn how to prevent errors and increase code quality with the help of linters.

1. What are linter?

Code Linting is a way to improve code quality. The term "linter" comes from the tool "Lint", which originally analyzed C source code. Already at that time the goal was to analyze the source code as automatically as possible and to find optimizations. In the course of time additional features were added.

Nowadays there are linters for almost all programming languages. JavaScript linters like JSHint or ESLint detect potential errors as well as code that is difficult to maintain. They detect common errors in source code and ensure that best practices are followed. Automatically detecting errors before the reviewer manually checks the code thus saves time and money.

Outside of JavaScript, linters for CSS or HTML are also developed and used in web development.

2. Why you should use Linter

  • Uniform coding style when working in a team
  • Detect and prevent major bugs at an early stage
  • Enforce best practices in the team

3. Why we use ESLint:

ESLint is characterized by its configurability. Presets help to quickly provide ESLint with a basic configuration. Despite the preset, the rules can be further customized to your team needs using the .eslintrc configuration file.

Add ESLint to the project

4. NPM Setup:

Install NPM in the project folder:

$ npm init

The Package.json file should now look something like this:

{ "name": "my-eslint-project", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC" }

5. Install ESLint as Develop Dependency:

$ npm i eslint -D

6. Create ESLint configuration file:

$ touch .eslintrc

7. ESLint base configuration:

In the .eslintrc you can now configure ESLint.

By default the default preset eslint:recommended is used.

With the ignorePatterns it is also possible to ignore single folders.

The config should look like this:

{ "env": { "browser": true, "es6": true }, "extends": ["eslint:recommended"], "ignorePatterns": [ “build/assets/javascripts/legacy/**/*.js”, ] }

8. Add NPM Task:

Via "Scripts" the test script can now be exchanged for "lint". For this, the name of the task is defined at the beginning and then the command.

With "npm run lint ESLint can now be executed automatically via the console.

{ "name": "eslint-test", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "lint": "eslint 'path/to/javascript/file.js'" }, "author": "", "license": "ISC", "devDependencies": { "eslint": "^7.32.0" } }

9. Optional: Install Airbnb Preset:

There is an optional possibility to install an additional ESLint preset from Airbnb. For this additional dependencies have to be installed. This is easily done with the following command:

$ npx install-peerdeps --dev ESLint-config-airbnb-base

The next step is to include the preset. For this, airbnb-base is inserted into the Extends array of the .eslintrc.

{ "extends": [ "eslint:recommended", "airbnb-base" ], "rules": [ "no-alert": "off" ], }

10. Optional: Override rules

ESLint rules can be overwritten / deactivated in two different ways.

1. Deactivate via inline comment:

Disable complete line:

var myTest = “hello world” // eslint-disable-line

Deactivate individual rules

alert(“hello world); // eslint-disable-line no-alert

2. deactivate via configuration

{ ... "extends": [ "eslint:recommended", "airbnb-base" ], "rules": { "no-alert": "off" } }

Closing words

Not every linter and preset is suitable for every application. Therefore, it is important to test different variants. At in2code we use a variety of linters for different purposes. From ESLint to PHP fixers, these tools help us keep our code quality high.

"Code faster, look at the time" - does this sound familiar to you?

How about time and respect for code quality? Working in a team? Automated tests?

Join us

SQL: Show all tables sorted by size in descending order

Lately I've been using the SQL command more often to find out which tables in the TYPO3 database are the largest. I've published the snippet once.

Go to news

TYPO3 12 with CKEditor 5: Styles in a single selection

If you set a link in the RTE in TYPO3, you may have to choose between different link classes, for example to create buttons in the frontend. What's new in TYPO3 12 is that you can select not just one...

Go to news

Null-Safe Operator in the TYPO3 area

With the introduction of PHP8, problems with undefined arrays or variables in general can arise in many places. Here are a few examples and simple solutions.

Go to news

Delete the first/last lines of a (SQL) file

There isn't much to say about the following commands. Sometimes it can be useful to delete the first (or last) X lines from a file. And if the file is too large to open with a conventional program, a...

Go to news

b13/container: Add and modify child elements in edit view

Unlike gridelements, you cannot manage the child elements in the B13 Container extension when you open the container in the editing view. I would be happy to show you how you can quickly install this...

Go to news

Menu comparison: Numbers, numbers, numbers

Go to news