How To Configure ESLint & Prettier in React PJ

konnichiwa sekai — Sat, 12 Nov 2022 00:23:24 +0000

I had chance to introduce and set up ESLint & prettier in project while working. So, the purpose of writing this post is simply memorandum and output for my sake. Please be aware that this post has inaccurate information. I will fix it As I realize

Introduce ESLint

Install ESLint

npm install eslint --save-dev

If the project is created by "create-react-up", Eslint has been installed already. You should not install again because it may cause some error later.

Set up ESLint

npm init @eslint/config

.eslintrc.json will be generated after You answer interactive questions on terminal.

Add .eslintignore

Write one line below into .eslintignore to prevent ESLint from linting files in node_modules.

node_modules/

Introduce Prettier

Install Prettier

npm install --save-dev --save-exact prettier
npm install --save-dev eslint-config-prettier

Edit .eslintrc

*Exsample below is JSON format.

"extends":[
   "xxxxx",
   "prettier" // make sure to add om the last line.
]

Check your settings has no confliction

npx eslint-config-prettier ./src/**

Execute the command above

If you see response like below, you can confirm the setting has no confliction

No rules that are unnecessary or conflict with Prettier were found.

Add .prettierignore

Write one line below into .prettierignore to prevent prettier from formatting files in node_modules.

node_modules

Add .prettierrc

You can setup your own formatting rule in this file.
If you do not create this file and configure, those setting below are applied as default

{
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": false,
  "quoteProps": "as-needed",
  "jsxSingleQuote": false,
  "trailingComma": "none",
  "bracketSpacing": true,
  "jsxBracketSameLine": false,
  "arrowParens": "avoid",
  "rangeStart": 0,
  "rangeEnd": Infinity,
  "parser": "none",
  "filepath": "none",
  "requirePragma": false,
  "insertPragma": false,
  "proseWrap": "preserve",
  "htmlWhitespaceSensitivity": "css",
  "vueIndentScriptAndStyle": false,
  "endOfLine": "auto",
  "embeddedLanguageFormatting": "auto"
}

Introduction of Pseudocode

konnichiwa sekai — Thu, 11 Aug 2022 12:04:00 +0000

How do often you write code? In my case, I often write code thinking logic in my head. However, it is inefficient practice especially when the code has complicated logic. How do you explain the logic to someone who has different programing language background? You might be distracted by the difference of each language syntax. That is the reason why I started searching technique to create a draft of code before writing and found pseudo code. So, I want to output what I have learned in this article.

Just so there's no confusion,
There is no universal "standard" for this code. Each textbook may have their own personal style of notation. Pseudocode is not a rigorous notation, since it is read by other people, not by the computer. Please read this article only as a guide.

❓ What Is Pseudo Code?

It is a simpler version of programming code in plain English before it is implemented in a specific programming language.
You can use it to create outline of the code you want to write.

👍 Advantage

Pseudocode is understood by the programmers of all types of programming language.
It enables the programmer to concentrate only on the algorithm part of the code development while writing.
You can save time for coding as conceptual logic have already been fixed.

⚠️ Disadvantage

It doesn't visualize logic like flowchart does.
Notation varies widely depending on the writer.

🔑 Main structures in pseudo code

SEQUENCE represents linear tasks sequentially performed one after the other.
SELECTION performs actions based on the condition given
ITERATION allows for multiple execution of statement

📝 Tips for clear pseudo code

Write only one task per line
Capitalize initial keyword
Indent to show hierarchy
End multiline structures
Keep your statements language-independent

🐾 1. Write only one task per line

You should only write one task for one line to make your pseudo code more readable. Here is example code below.

EX_BEFORE

Read name, product_price, amount, tax_rate
sales = product_price * amount, tax = sales * tax_rate
Write name, sales, sales + tax

EX_AFTER

READ name, product price, amount, tax_rate
sales = product_price * amount
tax = sales * tax_rate
sales_with_tax = sales + tax
WRITE name, sales, sales_with_tax

🐾 2. Capitalize initial keyword

In the example above, READ and WRITE are in caps. Keywords below are examples you should write in caps.

READ, WRITE, IF, ELSE, ENDIF, WHILE, ENDWHILE, REPEAT, UNTIL

🐾 3. Indent to show hierarchy

We will use a particular indentation pattern in each of the design structures:

SEQUENCE : keep statements in sequence all starting in the same column.
SELECTION : indent the statements inside the selection structure, but not the keywords that form the selection
ITERATION : indent the statements inside the loop, but not the keywords that form the loop

EX

READ name, result
IF result >= 80
   message = "You passed"
ELSE
   message = "You failed"
ENDIF
WRITE message

🐾 4. End multiline structures

See how IF statement ends with ENDIF in the above example. Regardless of type of keyword, whatever starts the structure shoud end with END-KEYWORD. For example, WHILE keyword ends with ENDWHILE and so on.

🐾 5. Keep your statements language-independent

Avoid using the special features available in the language you plan to write the program in as much as you can. If you are SURE it will be written in that language, then you can use the features. However, if not, it may cost you extra time or work.

💡 Examples of pseudo code

🐾 If statement

READ name, result
IF result = 100
   message = "Perfect!"
ELSEIF result >= 80
   message = "You passed"
ELSE
   message = "You failed"
ENDIF
WRITE message

🐾 Nested if

READ name,sex,is_married
IF sex = male
   WRITE "Hello Mr. " + name
ELSE
   IF is_married = true
      WRITE "Hello Mrs. " + name
   ELSE
      WRITE "Hello Ms. " + name
   ENDIF
ENDIF

🐾 WHILE

count = 0
WHILE count < 10
  ADD 1 to count
  WRITE count
ENDWHILE
WRITE “The end”

You can separate sequence into modules

count = 0
WHILE count < 10
   DO PROCESS
ENDWHILE
WRITE “The end”

PROCESS
ADD 1 to count
WRITE count

🐾 REPEAT/UNTIL

count = 0
REPEAT
  ADD 1 to count
  WRITE count
UNTIL count >= 10
WRITE “The end”

🐾 FOR

FOR x = 1 to 10
  IF x % 2 = 0
    WRITE x + " is even"
  ELSE
    WRITE x + " is odd"
ENDFOR

🐾 CASE

CASE Day OF
    1 : WRITE "Monday"
    2 : WRITE "Tuesday"
    3 : WRITE "Wednesday"
    4 : WRITE "Thursday"
    5 : WRITE "Friday"
    6 : WRITE "Saturday"
    7 : WRITE "Sunday"
    OTHERWISE OUTPUT "Day invalid"
ENDCASE

🐔 In the end

The techniques I introduced may not be the best practice. You have to figure out your own notation. But, I hope that this article helps you understand pseudo code and start using it.

🎓 Reference

PseudocodeBasics
Pseudocode: What It Is and How to Write It
Types of Logic structure

Forem: konnichiwa sekai