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
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):
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.
Prettier runs as a plugin of ESLint and thanks to the special configuration it won't conflict with it.
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.
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.
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With