πŸ”₯ NEW Code Tidbit Every Week πŸ”₯

# Improve Readability with ES6 Template Strings

Yay, no more backslash \ to escape characters in strings! A better way is to use template strings with backticks ( ` ). This makes your string so much more readable, don’t you think πŸ‘

If you use the eslint linter in your code, this is under the β€œno-useless-escape” rule πŸ€“

// Old way
const messy = 'No useless \\ (backslash) to escape "" \'\'';

// βœ… ES6 way
const better = `No useless \ (backslash) to escape "" ''`;

// Same result
console.log(messy === better); // true

# Improve Readability with String Interpolation

Another awesome feature of the template strings, is when you want to include a variable within the strings. No more messy + concatenation.

const weather = "β˜€οΈ";

// Old way
const messy = "Today is a " + weather + "!";

// βœ… ES6 way
const better = `Today is a ${weather} day!`;

// Same result
console.log(messy === better); // true

# ESLint: no-useless-escape

ESLint or any linter is like a spell checker in a word document. It goes through your code and let you know when you made a mistake.

But the challenging thing about code, is that it’s quite subjective. So unlike a spelling error, there is no hard defined rule what is right and wrong. Instead the rules are set by you. But does the mean you need to go rule by rule and adjust it. Not at all, there are tons of community eslint rules that you can use instead of setting your own. And if don’t agree with any particular one, you can easily adjust them. Some popular ones include AirBnB, Google, or just use ESLint recommended one rules.

This is how you can turn on the no-useless-escape rule:

.eslintrc

{
  "rules": {
    "no-useless-escape": "2"
  }
}

The options you can pass in are:

  • "off" or 0 πŸ‘‰ turn the rule off
  • "warn" or 1 πŸ‘‰ turn the rule on as a warning
  • "error" or 2 πŸ‘‰ turn the rule on as an error

# Resources


Related Tidbits