CODEWITHSUNDEEP
javascriptgithubcontinuous-integrationeslintgithub-actions
Manuel Abascal
Manuel Abascal

Reputation: 6378

ESLint doesn't break build with Github Actions

I'm using Github Actions for the first time. I'm using Vue-CLI & I want to create a job that lint my files on push & breaks the build process if there's ESLint'errors.

This is my package.json's scripts:

"scripts": {
  "serve": "vue-cli-service serve",
  "build": "vue-cli-service build",
  "lint": "vue-cli-service lint",
},

This is my .github/workflows/main.yml file:

name: Lint files on push

on: push

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Install modules
        run: npm install
      - name: Run ESLint
        run: npm run lint

I was using this template as inspiration. As you see in the screenshot below. The job is finished successfully, but it doesn't break the build or either fixes the linting. What am I doing wrong?

enter image description here

Upvotes: 6

Views: 5487

Answers (2)

Manuel Abascal
Manuel Abascal

Reputation: 6378

I figured out the issue. I was linting the file, but I couldn't see the changes in my PR due that I wasn't committing & pushing the new changes.

I have refactored my Github Action's workflow to lint the files & push them to the repository.

name: Lint files on push

on: push

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Installing node_modules
        run: npm install
      - name: Running ESLint
        run: npm run lint
      - name: Setting Github user.email
        run: git config --global user.email "<github-email-goes-here>"
      - name: Setting Github user.name
        run: git config --global user.name "<github-name-goes-here>"
      - name: Adding fixes for committing
        run: git add .
      - name: Committing ESLint fixes
        run: git commit -m "fixed ESLint issues"
      - name: Pushing fixes to current PR branch
        run: git push

You can get your user.email & user.name by typing in your terminal git config --global user.email & git config --global user.name respectively.

Upvotes: 0

Bertrand Martel
Bertrand Martel

Reputation: 45433

You can specify --no-fix so that it doesn't autofix errors/warnings and set --max-warnings to 0 as it seems you have one warning in your project and want it treated as an error.

In your package.json:

{
  ....
  "scripts": {
    "lint": "vue-cli-service lint --no-fix --max-warnings 0",
    ....
  }
}

checkout documentation

Log output:

warning: Delete `⏎········` (prettier/prettier) at src/components/QuestionInfo.vue:5:25:
  3 |     <div class="question_card container">
  4 |       <BaseTag
> 5 |         :class="['tag', 
    |                         ^
  6 |         'p-5', 'pb-0', 'pl-0', 'ml-5']"
  7 |         :tag-name="this.tag"
  8 |       />


1 warning found.
1 warning potentially fixable with the `--fix` option.
Eslint found too many warnings (maximum: 0).

Upvotes: 9

Related Questions