DEV Community: Beatriz R

Integrate ESLint with Jenkins Multibranch Pipeline

Beatriz R — Sun, 14 Feb 2021 15:56:12 +0000

A quick overview of ESLint + Jenkins integration, since I haven't seen many examples on internet.

For ESLint & Jenkins integration, we can use Warnings Next Generation Jenkins plugin.

A partial Jenkinsfile example for Multibranch Pipeline project would be:

stage('Install dependencies') {
        steps {
            echo 'Installing dependencies...'
            sh 'rm -rf node_modules package-lock.json && npm install'
        }
}
stage('Build') {
        steps {
            sh 'npm run build'
        }
}
stage ('Static Analysis') {
        steps {
            sh ' ./node_modules/eslint/bin/eslint.js -f checkstyle src > eslint.xml'
        }
        post {
            always {
                recordIssues enabledForFailure: true, aggregatingResults: true, tool: checkStyle(pattern: 'eslint.xml')
            }
        }
    }
}

From plugin documentation on github:

recordIssues step scans for issues in a given set of files (or in the console log) and reports these issues in your build.

This will enable a CheckStyle Warnings menu on your build #, like this:

Questions? Suggestions? Please let me know.

Você entra em flow programando?

Beatriz R — Fri, 17 Jul 2020 22:53:22 +0000

Flow, também conhecido como estado de fluxo, é um estado mental em que o indivíduo está totalmente imerso no que está fazendo, despertando um sentimento de envolvimento e enorme satisfação no decorrer da atividade.

Conceito criado pelo psicólogo húngaro Mihaly Csikszentmihalyi

See ESLint rules detail in VSCode with LintLens plugin

Beatriz R — Mon, 06 Jul 2020 05:22:04 +0000

Exploring projects on github, I came across an eslint-plugin-import issue where it was complained that "LintLens" was unable to present information about a specific eslint rule.

So, I found out that LintLens is a plugin to help us manage and understand ESLint rules directly in VSCode. 😁

In eslint configuration file, the rules description is presented inline. When hovering, other metadata is presented, along with a link to documentation page:

Pretty cool, right?

Extension page: https://marketplace.visualstudio.com/items?itemName=ghmcadams.lintlens

Ah, and I solved the issue by simply adding metadata to the rule :-)

Predefined parameters can be default value for next ones

Beatriz R — Mon, 06 Jul 2020 01:58:43 +0000

JavaScript ES6 allow us to initialize named parameters with default values.

But cooler than that is knowing that we can use earlier defined parameters as default value for the next function parameters. Examples:

function createContainer(height = 180, width = height) {
    return [height, width]
}
createContainer() // [180, 180]
createContainer(300) // [300, 300]
createContainer(120, 240) // [120, 240]

function greet(name, salute = 'Hello', message = `${salute}, ${name}!`) {
    return [name, salute, message];
}

console.log(greet('Beatriz')) 
// ['Beatriz', 'Hello', 'Hello, Beatriz!']

console.log(greet('Beatriz', 'Good Morning'))
// ['Beatriz', 'Good Morning', 'Good Morning, Beatriz!']

console.log(greet('Beatriz', 'Hi', 'Thank you ;)')) 
// ['Beatriz', 'Hi', 'Thank you ;)']