ESLint dan Prettier pada React Native
Apa itu ESLint ? dan Apa itu Prettier ?
Keduanya adalah untuk Bantuan Pemformatan kode JavaScript .
ESLint bekerja untuk mengidentifikasi kesalahan pada penulisan kode syntax JavaScript, yang bisa di config dan customize menggunakan pengaturan rule .
Sedangkan Prettier merupakan formatter untuk memastikan penulisan kode style anda seperti indentasi , jarak , titik koma (semicolon) , tanda kutip , dsb tidak berantakan.
Keduanya saling compatible dan dapat meningkatkan kinerja produktifitas dalam coding .
Terkadang kita kelelahan atau lupa tentang letak kesalahan-kesalahan kecil . Dengan Kedua nya kita dapat lebih memantau dan me review lagi code yang telah kita buat sehingga efektif .
ESLint dan Prettier dapat support pada beberapa IDE dan Text Editor , diantaranya adalah ; Visual Studio Code , Sublime , Atom .
Saat ini untuk memulai mari kita gunakan untuk percobaan ESLint , Prettier , React Native dan VSCode
Instalasi dan Config pada ESLint
- Uninstall Versi terdahulu
Uninstall ESLint anda pada versi yang lebih lawas , kita akan menggantinya untuk setup React Native . Untuk men-uninstall ESLint jalankan ;
$ npm uninstall eslintUntuk memastikan agar tidak tumpang tindih , mari kita uninstall ESLint yang ada dan menggantinya dengan Customize ESLint untuk React Native.
2. Install Latest Version
$ npm install eslint — save-dev3. Setting Up ESLint
$ npx eslint –-initAnda akan menjalankan config Wizard melalui command , simak jawaban dibawah ini untuk setup React Native
# question 1:? How would you like to use ESLint? …To check syntax onlyTo check syntax and find problems❯ To check syntax, find problems, and enforce code style# question 2:? What type of modules does your project use? …❯ JavaScript modules (import/export)CommonJS (require/exports)None of these# question 3:? Which framework does your project use? …❯ ReactVue.jsNone of these# question 4 (select “No”, because we won’t add TypeScript support for this project):? Does your project use TypeScript? › No / Yes# question 5:? Where does your code run? …Browser✔ Node# question 6:? How would you like to define a style for your project? …❯ Use a popular style guideAnswer questions about your styleInspect your JavaScript file(s)# question 7 (we’ll rely on Airbnb’s JavaScript style guide here):? Which style guide do you want to follow? …❯ Airbnb: https://github.com/airbnb/javascriptStandard: https://github.com/standard/standardGoogle: https://github.com/google/eslint-config-google# question 8:? What format do you want your config file to be in? …JavaScriptYAML❯ JSON# the final prompt here is where eslint will ask you if you want to install all the necessary dependencies. Select “Yes” and hit enter:Checking peerDependencies of eslint-config-airbnb@latestThe config that you have selected requires the following dependencies:eslint-plugin-react@⁷.21.5 eslint-config-airbnb@latest eslint@⁵.16.0 || ^6.8.0 || ^7.2.0 eslint-plugin-import@².22.1 eslint-plugin-jsx-a11y@⁶.4.1 eslint-plugin-react-hooks@⁴ || ^3 || ^2.3.0 || ^1.7.0? Would you like to install them now with npm? › No / Yes
4. Setelah proses wizard selesai , akan ada file .eslintrc.json pada Direktori , (kita akan mengubah config sesuai dengan React Native pada umumnya nanti) .
.eslintrc.json
{“env”: {“es2021”: true,“node”: true,},“extends”: [“plugin:react/recommended”,“airbnb”],“parserOptions”: {“ecmaFeatures”: {“jsx”: true},“ecmaVersion”: 12,“sourceType”: “module”},“plugins”: [“react”],“rules”: {}}
CATATAN: Terkadang ada konfigurasi .eslintrc.js, yang berasal dari template . Jika file .eslintrc.js masih ada hapus saja , kita akan menggunakan versi JSON nya yang berasal dari Command Setup .
5. React Hooks cukup populer pada saat ini dan kemungkinan besar setiap proyek React Native baru akan menggunakannya, jadi mari tambahkan aturan ESLint yang direkomendasikan untuk hook. Untuk itu, perbarui bagian ekstensi file .eslintrc.json Anda seperti ini:
.eslintrc.json
{//…“extends”: [“plugin:react/recommended”,“airbnb”,“airbnb/hooks”],//…}
6. Install Plugin Tambahan
$ npm install — save-dev eslint-plugin-react-native sebagai plugin sesuai dengan ESLint Rule React Native https://.npmjs.com/package/eslint-plugin-react-native#list-of-supported-rules
.eslintrc.json
{//…“plugins”: [“react”,“react-native”],//…}
7. Buatlah file .eslintignore pada direktori anda , sebagai pengecualian direktori untuk ESLint .
Dan tulis kode ini didalam file .eslintignore
node_modules/Tambahan jika anda menggunakan VSCode pasang Extension ESLint pada VSCode dan men-Enable nya , lalu buatlah settings.json pada direktori .vscode untuk config
{"editor.codeActionsOnSave": {"source.fixAll.eslint": true}}
Install dan Setup Prettier
1. Jalankan kode berikut untuk menginstall Prettier
$ npm install –save-dev –save-exact prettierDan lakukan Instalasi Extension Prettier pada VSCode
2. Jalankan command
$ npm install — save-dev eslint-config-prettierBuka File .eslintrc.json dan isi config seperti berikut
.eslintrc.json
{//…“extends”: [“plugin:react/recommended”,“airbnb”,“airbnb/hooks”,“prettier”,“prettier/react”],//…}
3. Selanjutnya kita buat file .prettierc.json dan kita setup code nya seperti berikut ,
{“arrowParens”: “always”,“bracketSpacing”: true,“jsxBracketSameLine”: false,“jsxSingleQuote”: false,“quoteProps”: “as-needed”,“singleQuote”: true,“semi”: true,“printWidth”: 100,“useTabs”: false,“tabWidth”: 2,“trailingComma”: “es5”}
4. Tambahkan kode berikut ke .vscode json config yang telah dibuat
{“arrowParens”: “always”,“bracketSpacing”: true,“jsxBracketSameLine”: false,“jsxSingleQuote”: false,“quoteProps”: “as-needed”,“singleQuote”: true,“semi”: true,“printWidth”: 100,“useTabs”: false,“tabWidth”: 2,“trailingComma”: “es5”}
5. Terakhir . Masukan kode berikut ke dalam .eslintrc.json sebagai rules . Ini berguna jika anda menggunakan extensi .JS dalam penulisan JSX
“rules”: {// allow .js files to contain JSX code“react/jsx-filename-extension”: [1, { “extensions”: [“.js”, “.jsx”] }],// prevent eslint to complain about the “styles” variable being used before it was defined“no-use-before-define”: [“error”, { “variables”: false }],// ignore errors for the react-navigation package“react/prop-types”: [“error”, {“ignore”: [“navigation”, “navigation.navigate”]}]}
Itulah cara setup ESLint + Prettier , anda bisa men-customize nya sesuai kebutuhan .
Jika anda kesulitan , anda dapat membandingkan source code atau me replace file config setelah menginstall ESLint dan Prettier.
Dan untuk penggunaan , aktifkan extensi pada VSCode , kemudian anda bisa menggunakan hotkeys ctrl + shift + p , kemudian akan muncul command (posisinya diatas ) , kemudian pilih format document with , pilih prettier , hal ini akan membuat auto format pada Prettier .
Semoga bermanfaat , dan Happy Coding ~!
