Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What could cause eslint-plugin-prettier to report error on CircleCI but be silent locally?

I have to migrate from CircleCI 1.0 to 2.0. After I have changed the old configuration to the new one, build failed because of eslint-plugin-prettier reported prettier spacing violations.

MyProject - is my GitHub repo and it contains a folder client which has all front-end code which I want to build on CI. In client folder there are

.eslintrc.json

...
"extends": ["airbnb", "prettier"],
"plugins": ["prettier"],
...

.prettierrc

{
    "tabWidth": 4,
    "trailingComma": "all",
    "singleQuote": true
}

.gitattributes (I work on Windows 10) with the following code:

*.js text eol=crlf
*.jsx text eol=crlf

and of course package.json

enter image description here

New CircleCI configuration:

version: 2

jobs:
  build:
    working_directory: ~/MyProject
    docker:
      - image: circleci/node:6.14.3-jessie-browsers
    steps:
      - checkout
      - run:
          name: Install Packages
          command: npm install
          working_directory: client
      - run:
          name: Test
          command: npm run validate
          working_directory: client

Old CircleCI configuration:

## Customize dependencies
machine:
  node:
    version: 6.1.0

 # Remove cache before new build. It takes much time
 # but fixing a build which is broken long time ago (and not detected because of cache)  
 # is even more time consuming
dependencies:
  post:
   - rm -r ~/.npm 

## Customize test commands
test:
  override:
    - npm run validate

general:
  build_dir: client

The build fails due to linting problems (all are about the number of spaces):

enter image description here

So, what could cause these errors? I am out of ideas here. I first thought it might be because .prettierrc was not found. However, when I deleted it for an experiment and run locally I got errors in all files in total more than 1000. While on CI with .prettierrc in place there are were only 188 in few files.

like image 758
Oleksandr Nechai Avatar asked Jul 01 '18 07:07

Oleksandr Nechai


People also ask

Does Prettier conflict with ESLint?

Prettier runs as a plugin of ESLint and thanks to the special configuration it won't conflict with it.

What does Prettier do that ESLint doesn t?

As mentioned earlier, whereas Prettier takes care of your code formatting, ESLint takes care of your code style. The former does everything automatically for you. If you have set up Prettier, you can configure it to format your file on saving it. That way, you never need to worry about your code formatting anymore.

How do I enable Prettier ESLint?

Configuring Prettier to work with ESLint With ESLint and Prettier already installed, install these two packages as well. eslint-config-prettier : Turns off all ESLint rules that have the potential to interfere with Prettier rules. eslint-plugin-prettier : Turns Prettier rules into ESLint rules.

What is ESLint-plugin-Prettier?

Runs Prettier as an ESLint rule and reports differences as individual ESLint issues. If your desired formatting does not match Prettier's output, you should use a different tool such as prettier-eslint instead.


1 Answers

I have finally figured it out.

My package.json file contained the following dependency on the Prettier: "prettier": "^1.11.1".

I had to learn hard way the meaning of this little symbol ^. It allows installing any version of Prettier which is compatible with 1.11.1. In my case on CircleCI 2.0 it installed 1.14.2 which adds new features to Prettier.

I believe it did not break on CircleCI version 1.0 and locally because of cached node_modules which contained earlier Prettier versions compatible with 1.11.1

Here is nice video about semantic versioning.

like image 130
Oleksandr Nechai Avatar answered Sep 20 '22 05:09

Oleksandr Nechai