DEV Community: Coding with Toms💻☕🚀

ESLint and how to get the most out of it

Coding with Toms💻☕🚀 — Sun, 02 Jul 2023 14:10:40 +0000

Intro

What is ESLint? ESLint is a static code verification tool that automatically reports an error/ warning if the set rules are broken.

Why would you want to use this? It allows developers to automatically enforce the company's code style guide and standards, prevents common errors and reduces time spent on PRs leaving a comment that someone forgot to add ";" at the end of the line. Ultimately increasing the quality of your codebase and increasing each developer's efficiency.

Common ESLint setting to enforce Javascript best practices

To start with, probably the easiest and most powerful rule to get a lot out of ESLint is to add an extension called "eslint:recommended" and if you are using typescript the also "plugin:@typescript-eslint/recommended". Additionally, on top of it, I would suggest taking a look at these rules:

"no-console": This rule helps identify and remove any remaining console.log statements, ensuring that debug logs are not present in production code.

"no-unused-vars": It detects unused variables and parameters, helping to identify and remove unnecessary code and improve code maintainability.

"no-undef": This rule checks for undeclared variables and helps catch typos or potential issues with variable scoping.

"strict": The "strict" mode enforces stricter coding standards by requiring variables to be declared with var, let, or const and prevents the use of undeclared variables.

"no-magic-numbers": This rule discourages the use of "magic numbers" in code by requiring the use of named constants or variables, which improves code readability and maintainability.

"consistent-return": It enforces consistent return values in functions, ensuring that all code paths return a value or explicitly use "void" for TypeScript functions.

"no-else-return": This rule discourages the use of unnecessary "else" statements when the "if" statement already has a return or throw statement, improving code clarity and reducing cognitive load.

"no-use-before-define": It prevents the use of variables before they are defined, avoiding potential bugs caused by hoisting and helping maintain clean code structure.

"prefer-const": This rule encourages the use of const for variables that are not reassigned, promoting immutability and reducing the risk of accidental variable mutations.

"eqeqeq": This rule enforces the use of strict equality (===) over loose equality (==), promoting safer and more predictable comparisons by requiring the comparison of both value and type.

"complexity": This rule helps identify overly complex functions by setting a threshold for cyclomatic complexity, allowing you to maintain more readable and maintainable code by encouraging smaller, more focused functions.

In code it would look like this:

{ 
    "root": true, 
    "env": { "node": true, "browser": true, "es2021": true }, 
    "extends": [ "eslint:recommended", "plugin:@typescript-eslint/recommended" ], 
    "parserOptions": { "ecmaVersion": 2021, "sourceType": "module" }, 
    "plugins": [ "@typescript-eslint" ], 
    "rules": { 
        "no-console": "error", 
        "no-unused-vars": "erroe", 
        "no-undef": "error", 
        "strict": ["error", "global"], 
        "no-magic-numbers": ["warn", { "ignore": [0, 1], "ignoreArrayIndexes": true }], 
        "consistent-return": "error", 
        "no-else-return": "error", 
        "no-use-before-define": "error", 
        "prefer-const": "error", 
        "no-restricted-syntax": ["error", "WithStatement"], 
        "eqeqeq": "error", 
        "complexity": ["warn", 10] } 
}

Integrate ESLint with other linting tools and frameworks

"Prettier": Integrating ESLint with Prettier so that they wouldn't conflict each other- https://www.npmjs.com/package/eslint-config-prettier.

"Typescript": Typescript and ESLint can work together and report issues in the compiler, grab the eslint-typescript plugin and get working together and catch the potential bugs as you write your code- https://www.npmjs.com/package/@typescript-eslint/eslint-plugin

this plugin can do more of just that, I highly recommend checking out the official documentation here- https://typescript-eslint.io/.

"3rd party predefined rule plugins": these plugins allow you to fast-track some of the setup and align your code standards with some of the already established communities that have gone through rigorous processes of setting these rules in. the firts place.

Google- https://www.npmjs.com/package/eslint-config-google

AirBnB- https://www.npmjs.com/package/eslint-config-airbnb and for typescript https://www.npmjs.com/package/eslint-config-airbnb-typescript

Vue- https://www.npmjs.com/package/eslint-plugin-vue

Angular- https://www.npmjs.com/package/@angular-eslint/eslint-plugin

React- https://www.npmjs.com/package/eslint-plugin-react

Next.js- https://www.npmjs.com/package/eslint-config-next

The only ESLint code editor plugin you will ever need:

ESLint plugin by Microsoft- automatically underlines the code that has an eslint error- https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

ESLint and PRs (local and/or pipeline check)

What's the use of ESLint if only you are using it? ESlint rule enforcement should be a part of your DevOps process, it is highly recommended that you run your eslint . (this command runs it on all of your codebase) either

in your pipeline or

locally pre-commit f.x. using Husky. If you are going for the local environment option and your codebase is relatively large you might want to upgrade your ESLint call to run only on the files that you have changed by doing this- eslint --fix $(git diff --name-only develop '*/.js' | xargs) For more discussion on this see this stackOverflow post https://stackoverflow.com/questions/54511168/enable-eslint-only-for-edited-files

Custom ESLint rules

If you cannot find an ESLint rule that fits your requirements it is possible to create one yourself! For example, if for some reason you would want to disallow using the word "coconut" in your code base you could write a custom rule that will throw you an error if someone tried to do that. That would look something like this:

// avoid-name.js

module.exports = {
    meta: {
        messages: {
            avoidName: "Avoid using variables named '{{ name }}'"
        }
    },
    create(context) {
        return {
            Identifier(node) {
                if (node.name === "coconut") {
                    context.report({
                        node,
                        messageId: "avoidName",
                        data: {
                            name: "coconut",
                        }
                    });
                }
            }
        };
    }
};

// someFile.js

var coconut = 2;
//  ^ error: Avoid using variables named 'coconut'

// avoid-name.test.js

var rule = require("../../../lib/rules/avoid-name");
var RuleTester = require("eslint").RuleTester;

var ruleTester = new RuleTester();
ruleTester.run("avoid-name", rule, {
    valid: ["apple", "banana"],
    invalid: [
        {
            code: "coconut",
            errors: [
                {
                    messageId: "avoidName"
                }
            ]
        }
    ]
});

Conclusion

In conclusion, ESLint is a powerful tool for static code verification that offers numerous benefits for developers and codebases. By enforcing code style guides and standards, ESLint helps maintain consistency across the development team and improves the overall quality of the codebase. It detects common errors, such as unused variables and undeclared variables, reducing the likelihood of bugs and improving code maintainability. Additionally, ESLint promotes best practices, such as avoiding magic numbers, using strict equality, and reducing code complexity. Integrating ESLint with other tools and frameworks, such as Prettier and TypeScript, enhances its functionality and allows for a seamless development experience. By incorporating ESLint into the DevOps process and running it in pipelines or locally, you can ensure rule enforcement throughout the development lifecycle. Lastly, ESLint provides the flexibility to create custom rules, enabling you to tailor the tool to your specific requirements. Overall, ESLint is a valuable asset for developers, increasing code quality, reducing errors, and enhancing productivity.

What is you favourite ESLint rule? Let me know in the comment section

Prettier and how to get most out of it

Coding with Toms💻☕🚀 — Sat, 01 Jul 2023 11:29:39 +0000

Intro

What is Prettier? Prettier is an opinionated code formatter that supports many languages and integrates with most of code editors. It must be emphasised that Prettier is opinionated since it provides very few configurable properties (23 as of 26th June 2023).

What does code formatting mean? Essential Prettier parses and reprints code according to the rules set in the config file. It can be done by either:

Installing Prettier plugin (highly recommended) and/or

Running prettier --write . command

Prettier rules and best practices

When it comes to configuring Prettier settings, it is advisable to prioritize simplicity, as the tool's philosophy is rooted in its opinionated nature. Google's TypeScript Style guide also reflects this approach, recommending keeping Prettier configurations minimal to fully embrace its opinionated formatting decisions.

// https://github.com/google/gts/blob/main/.prettierrc.json
{
  "bracketSpacing": false,
  "singleQuote": true,
  "trailingComma": "es5",
  "arrowParens": "avoid"
}

Prettier integrations with other tools

Prettier plugin (VSCode and most other code editors)

Prettier plugin will generally allow you to set up your code editor to reformat the code in your file every time you save it. This is very handy since you don't have to bother with formatting your code by hand any more. https://prettier.io/docs/en/editors.html

Prettier and pipeline/ husky

Since not all of your colleagues will neccecerly have set up the plugin and will make sure that the code is formatted it is needed to enforce that automatically. To do that it is recommended to use husky to run Prettier pre-commit. For a tutorial on how to do it, look here- https://prettier.io/docs/en/precommit.html . Additionally, it might be worthwhile to add a prettier check . in your pipeline just to be sure that the code meets the Prettier rules.

Prettier and ESLint

By combining Prettier and ESLint, you can leverage the strengths of both tools. Prettier is responsible for formatting your code, ensuring consistent and aesthetically pleasing styles. On the other hand, ESLint provides powerful configuration capabilities to enforce code quality and best practices.

prettier-eslint plugin combines the formatting capabilities of Prettier with the configuration capabilities of eslint. It formats your code using Prettier and then applies eslint --fix command to ensure adherence to your eslint configuration. This allows you to benefit from Prettier's powerful formatting while maintaining linting consistency with eslint.

https://github.com/prettier/prettier-eslint

eslint-plugin-prettier plugin is an ESLint plugin that runs Prettier as an ESLint rule and reports differences as individual ESLint issues.

https://www.npmjs.com/package/eslint-plugin-prettier

Prettier and XML

By default Prettier does not support XML, if you do need Prettier to support XML there is a plugin in place that can help you out. https://www.npmjs.com/package/@prettier/plugin-xml

Unfortunately, Pretteir XML does not work out of the box together with the rest of your Prettier setup, therefore you need to do some additional configuration.

         module.exports = {
            overrides: [
                {
                    files: "*/",
                    options: {
                       "bracketSpacing": false,
                       "singleQuote": true,
                       "trailingComma": "es5",
                       "arrowParens": "avoid"
                      }        
                },
                {
                    files: "*.xml",
                    options: {
                        parser: "xml",
                        plugins: ["@prettier/plugin-xml"], 
                        tabWidth: 4,
                        printWidth: 120, 
                        bracketSameLine: true,
                        singleAttributePerLine: true, 
                        useTabs: true
                    }
                }
            ]
          };

And when you call it in husky you can do something like this to make sure that xml is formatted-

"prettier:xml": "prettier --parser xml --config ./prettier.config.js --write '*/.xml'"

Prettier alternatives

ESLint

ESLint code formatting is still a valuable choice despite the emergence of Prettier as a popular code formatter. Firstly, ESLint encompasses a broader scope, allowing for code formatting as well as static analysis for detecting potential errors and enforcing best practices. This flexibility is advantageous for maintaining consistent code quality and preventing common mistakes. Secondly, ESLint provides a vast ecosystem of plugins and configurations, empowering developers to customize and tailor linting rules to their specific project needs. This level of configurability ensures adaptability to diverse codebases and coding styles. Therefore, ESLint remains a reliable and powerful tool for code formatting and beyond.- https://www.npmjs.com/package/eslint,

Standard

Standard is still a strong alternative to Prettier. It provides a comprehensive solution by combining code formatting with a set of predefined linting rules. These rules encompass not only code style conventions but also potential errors and best practices. Standard's predefined nature eliminates the need for extensive configuration, making it quick and easy to set up. While Prettier focuses solely on code formatting, Standard offers a holistic approach that ensures code quality, consistency, and adherence to industry standards. Therefore, Standard remains a reliable choice for developers seeking an all-in-one solution for code formatting and linting.

https://www.npmjs.com/package/standard ,

js-beautify

JS-Beautify is still a viable option compared to Prettier. It specializes in code formatting and offers extensive customization options for indentation, spacing, and other stylistic preferences. While Prettier focuses on enforcing a consistent formatting style, JS-Beautify allows developers to tailor the formatting rules to their specific needs. It supports various programming languages and provides flexibility in handling different codebases. JS-Beautify's ability to fine-tune formatting rules makes it a valuable choice for developers who prioritize customization while maintaining code readability and aesthetics. Therefore, JS-Beautify remains a strong contender for code formatting needs alongside Prettier.

https://www.npmjs.com/package/js-beautify

Conclusion

In conclusion, leveraging the full potential of Prettier involves embracing its opinionated nature and keeping the configuration as simple as possible. By following Prettier's philosophy, developers can benefit from consistent and aesthetically pleasing code formatting. Integrating Prettier with other tools like ESLint enhances code quality and adherence to best practices. While alternative options such as ESLint, Standard, and JS-Beautify offer different features and levels of customization, Prettier remains a reliable choice for achieving code readability and aesthetics. Ultimately, selecting the right code formatting tool depends on the specific needs and preferences of the development team.

5 Productivity VScode extensions for Javascript developers

Coding with Toms💻☕🚀 — Sun, 09 Aug 2020 13:02:06 +0000

If you improve by 1% every day you will improve by 100% in 100 days.

Sounds very simple but it is hard to achieve. Here I have curated a list of 5 extensions that will help you improve your coding productivity right away!🚀🚀🚀

Prettier

Prettier or another forms of it are quickly becoming a standard of many software engineering teams because it helps to maintain the code base structure and syntax consistent throughout your codebase while at the same time removing the hustle of formatting the code for each individual developer.

Get it here: Prettier

Tab nine

Tab nine is an AI based code assistant software. It predicts what code you might be writing and suggest you to autocomplete what you might be intending to write. It works very similarly as autocomplete in Gmail just for coding.

I recommend giving it a try and see for yourself how the autosuggestion feel to use.

Get it here: Tab nine

ESlint

ESLint prevents you from making code mistakes even before you try to run the code. It will generate an underline of where the problem might originate and show an error in console after the code is compiled. In this way you are increasingly reducing the time you spend on debugging and testing the code.

Get it here: ESlint

Code Spell Checker

Have you ever did a merge/pull request and were caught misspelling something and the had to pull up the old branch again just to fix the minor spelling issue? Now there is a solution that will save you even before you push your code.

Get it here: Code Spell Checker

Bracket pair colorizer

Everyone who have spent some time coding have ended up in the situation where you click trough the brackets to just find the matching one, now there is a tool that makes it much faster to identify the right brackets by colorising them.

Get it here: Bracket pair colorizer

Conclusion

I hope you find this article useful and found a plugin that could add another 1% to your growth and productivity! Have a productive coding!🚀🚀🚀

Top 5 Angular Design Systems/ Component Libraries

Coding with Toms💻☕🚀 — Sun, 02 Aug 2020 12:16:40 +0000

I was about to start a side project with Angular and began wondering what design system should I use to avoid my app looking like plain html during the process. After doing some research I decided that it is worth noting down my research and sharing it with the world.

Some of the requirements by which the selected design systems were selected:

The system has to be designed to be compatible with Angular (installable via Angular CLI)
It has to look cool and modern
It has to have a large component library (a lot of the one I have seen actually don't have all the components you might think they should have!)

5. Onsen UI

https://onsen.io/

Onsen UI focuses on providing ui elements for hybrid apps and PWA's. The design of components looks very inspired by google material design with its own twist to it. I think could be a great library if you want to focus on mobile experience.

4.Kendo UI

https://www.telerik.com/kendo-angular-ui

Kendo UI is one of the largest components librarys that I have seen with a lot of focus put on data visualisation and developing data intensive UI's. If Kendo UI was a free service it would definitely deserve the first place on this list.

3.Semantic UI

https://semantic-ui.com/

What is unique about Semantic UI is that its design resemble IOS design system. I think it is a fantastic library if you would like your app to blend in on your Iphone or Mac.

2.NGX bootstrap

https://valor-software.com/ngx-bootstrap/

Even though bootstrap is already quit an old component library I still think it is one of the most versatile and flexible libraries available out there. I must give my kudos to bootstrap for keeping up date with web technologies and still making it a solid choice in 2020.

1. Angular material

https://material.angular.io/

Angular material design is the library to pick if you want the most well developed and supported library for Angular. Why is it so? Angular and material design origins can be traced back to Google, therefor I can see how both of these ideas have developed together over the last decade. Outside of that Angular material is quit a refined UI library which I have used on several project and it have not let me down.

Conclusion:
There are a lot of different component libraries out there and you must pick the one that fits your project the best. In the end, for my project I picked Semantic UI just because I have never developed anything that looks like IOS.

What is your experience with Angular ui libraries?