How to Setup ESLint and Prettier in VSCode For React Project

How to setup ESLint with Prettier in VSCode for React Project

1 minute read

Create a React App: npx create-react-app my-app Install ESLint and Prettier in VSCode. In the project directory, run npm i prettier eslint-config-prettier eslint-plugin-prettier -D In User Settings (ctrl + ,), put in the following: { "editor.formatOnSave": true, "[javascript]": { "editor.formatOnSave": false }, "eslint.autoFixOnSave": true, "eslint.alwaysShowStatus": true, "prettier.disableLanguages": [ "js" ], "files.autoSave": "onFocusChange" } Create an .eslintrc file: { "extends": ["react-app", "plugin:prettier/recommended"] } If your project is not under git, run git init.

Building a JavaScript Development Environment

How to setup a JS development environment in 2018

14 minute read

This blog post is a summary of the excellent Pluralsight Course by Cory House. Editor and Configuration First of all, editor of choice here is surprise surprise VS Code. I’m actually happly surprised that Erich Gamma is behind this. Use EditorConfig to manage, well, editor configurations. Tabs VS spaces, etc. Note that VS Code need to install a plugin for it to work. The example .editorconfig file: root = true [] indent_style = space indent_size = 2 end_of_line = lf insert_final_newline = true trim_trailing_whitespace = true charset = utf-8 [.

JavaScript and Prototype Design Pattern

Is Javascript's prototypal inheritance borrowed from prototype design pattern?

Guowei Lv

1 minute read

Javascript has prototypal inheritance. For example let’s create a constructor function: function Person(firstname, lastname) { this.firstname = firstname; this.lastname = lastname; } Person.prototype = { fullname: function() { return this.firstname + ' ' + this.lastname; } }; var bob = new Person("Bob", "Doe"); console.log(bob.fullname()); This is very similar to the Prototype Pattern. Whenever we want a new object, we always create it out of some prototype object. I find that it is easier to understand the JS’s prototype inheritance when comparing it with the Prototype Pattern.

JavaScript the Weird Parts Distilled

Learn Javascript the Weird Parts

Guowei Lv

1 minute read

Javascript: Understanding the Weird Parts is a great course. Highly recommended if you are getting into JS from other programming languages. Much better than the book Javascript: the Good Parts in my opinion. Here I distilled all the source code with comments from the videos, for the impatients.

My Experience with First Day of JavaScript30

What happened when I tried to follow the first lesson in JavaScript30

2 minute read

It’s nice weather today, so I decided to give JS another chance. For thoes who don’t know yet(really, if you want to do JS you should know already, haven’t you been reading everything in JS weekly every week?). There is a free course called JavaScript30 offered by Wes Bos, in which you build 30 small project using vanilla JS. Since it is perceived pretty well in JS community, I decided to start from there.