Skip to content

ESLint all the things, IDE Integration, Prettier
Compare
Choose a tag to compare
@onigoetz onigoetz released this 21 May 13:36
· 2216 commits to master since this release
v1.7.0
10066b2

Highlights

  • Complete IDE Integration with the new crafty ide command ( #40 )
  • Replace TSLint with ESLint ( #290 )
  • Add Prettier for CSS, JavaScript and TypeScript formatting ( #17 )
  • Performance improvements for startup and compilation
  • Stylelint improvements

crafty ide for IDE Integration

Since the first day of Crafty, the goal has been to reduce the number of configuration
files that have to be managed by hand.
This is a big advantage for managing many projects, but is an inconveninent as IDEs can't
find the expected configuration files to configure themselves.

With the new crafty ide command, you get the best of both worlds, Crafty is still configured through a single
file and your IDE will get what it needs as this command will output the configuration files for it.

Integrations are now done for:

  • ESLint with .eslintrc.js
  • Stylelint with stylelint.config.js
  • Jest with jest.config.js
  • Prettier with prettier.config.js

On top of that, as these files are specific to your configuration and for some of them, specific to the user's environment.
A .gitignore file is automatically created, or your existing gitignore is modified.

Replace TSLint with ESLint

TSLint, while being adapted specifically for TypeScript is harder to configure, has less rules and a smaller community than ESLint.

That's some of the reasons why the TypeScript team announced they will participate in the effort of making ESLint work great with TypeScript.
The TSLint team also announced they will deprecate TSLint and help with adding the rules that didn't exist yet in ESLint.

What this means for you in practice:

  • The command crafty tsLint has been removed and now crafty jsLint works for TypeScript as well
  • All dependencies for ESLint have been moved from @swissquote/crafty-preset-babel into @swissquote/crafty-preset-eslint
  • crafty jsLint is now provided by @swissquote/crafty-preset-eslint
  • Our eslint plugin @swissquote/eslint-plugin-swissquote now supports TypeScript out of the box

One thing that might surprise you is that our ESLint configuration has way more rules enabled, so one the first update, you will probably see a lot more things reported compared to what you were used to.

Prettier

Prettier is quickly becoming the de-facto standard for code formatting in many languages.
Its approach is to format your code always the same way, with a minimum of configuration options, reducing code-formatting bike-shedding to almost non-existent.
Luckily, our code style rules, were pretty much aligned with what Prettier applies by default making the transition as painless as possible.

With this change all our CSS, JavaScript and TypeScript is formatted with Prettier.

We also disabled all our ESLint and Stylelint rules specific to formatting.

Performance improvements

  • Added fork-ts-webpack-checker-plugin to check TypeScript on a separate thread. Enabled only if you don't need declarations.
  • Replace chalk with ansi-colors
  • Replace meow with a direct use of yargs-parser
  • Lazy load jest-cli and caniuse-cli for faster initial start

Stylelint Changes

  • Use Prettier to format CSS
  • Added Stylelint rule to detect use of -var and recommend to use calc(var() * -1) instead
  • Added no-unsupported-browser-features plugin to Stylelint #287

Other changes

  • Allow a preset to depend from another preset.
  • Bugfix extractCSS configuration interpretation. #289 Thanks to @vitalishapovalov for the fix.
  • Add react-hot-loader to webpack's resolve aliases to avoid having to install it separately in a project.
  • Error management improvements
    • Warns on webpack configuration in case of missing tsconfig.json
    • Improve logging in case of incorrect stylelint configuration
    • Improve logging in case of error in a Crafty command's code.

Updates

  • autoprefixer from 9.5.0 to 9.5.1
  • @babel/* from 7.4.0 to 7.4.4
  • babel-loader from 8.0.5 to 8.0.6
  • babel-plugin-istanbul from 5.1.1 to 5.1.4
  • browserslist from 4.5.3 to 4.6.0
  • confusing-browser-globals from 1.0.6 to 1.0.7
  • enzyme-adapter-react-16 from 1.11.2 to 1.13.0
  • eslint-plugin-import from 2.16.0 to 2.17.2
  • eslint-plugin-react from 7.12.4 to 7.13.0
  • gulp-svgmin from 2.1.0 to 2.2.0
  • gulp-terser from 1.1.7 to 1.2.0
  • inspectpack from 4.1.2 to 4.2.1
  • jest-cli from 24.6.0 to 24.8.0
  • jest from 24.6.0 to 24.8.0
  • postcss from 7.0.14 to 7.0.16
  • react-hot-loader from 4.8.2 to 4.8.7
  • resolve-from from 4.0.0 to 5.0.0
  • rollup from 1.8.0 to 1.12.3
  • rollup-plugin-commonjs from 9.2.3 to 10.0.0
  • rollup-plugin-node-resolve from 4.0.1 to 5.0.0
  • rollup-plugin-replace from 2.1.1 to 2.2.0
  • stylelint from 9.10.1 to 10.0.1
  • stylelint-scss from 3.5.4 to 3.6.1
  • terser-webpack-plugin from 1.2.3 to 1.2.4
  • ts-jest from 24.0.1 to 24.0.2
  • ts-loader from 5.3.3 to 6.0.1
  • typescript from 3.4.1 to 3.4.5
  • undertaker from 1.2.0 to 1.2.1
  • webpack-chain from 5.2.4 to 6.0.0
  • webpack-dev-server from 3.2.1 to 3.4.1
  • webpack from 4.29.6 to 4.32.0
Assets 2