【Day4】Eslint设定及JSX表达式介绍，乾净整齐的程序码才能使人轻松读懂!(๑¯◡¯๑)

在说明JSX前，先来提一个规则 EsLint !!

• Eslint 是用来检测Code的标准及是否违规,而这些规定其实可以在设定档可以自行设定

为了让我们在使用JSX的时候，Code看起来更整齐乾净，所以会安装EsLint

yarn add eslint --dev

安装完毕以後，我们必须在专案下建立一个eslint的初始档

• 建立一个.eslintrc.js的档案 => 内容是eslint相关的一些设定

  module.exports = {
      extends: ['eslint:recommended'],
      parserOptions: {
          ecmaVersion: 6,
          sourceType: 'module',
          ecmaFeatures: {
              jsx: true
          }
      },
      env: {
          browser: true,
          es6: true,
          node: true
      },
      rules: {
          "no-console": 0,
          "no-unused-vars": 0
      }
  };
  

初始档设定完毕，我们必须让VsCode能套用EsLint的规则

• 打开喜好设定里的设定，确定里面的设定是不是含有javascriptreact

  

  

  {
    "editor.formatOnSave": true,
    "eslint.validate": [
        "vue",
        "html",
        "javascript",
        "typescript",
        "javascriptreact",
        "typescriptreact"
    ],
    "files.associations": {
        "*.js": "javascriptreact"
    },
    "editor.codeActionsOnSave": null,
    "editor.fontLigatures": null,
    "eslint.runtime": "",
  
  }
  

OK !! 上述就完成了eslint的设定了!

接着来说说JSX吧!! 在上一篇有提到说 JSX是一种JS的表达式，
用JSX我们就不用像上一篇提到这麽麻烦的方法来创建并渲染元素了。

那是因为JSX有以下优点

• 让我们可以在JS档案中使用HTML标签
• 让我们可以使用 (用JSX生出REACT的元素)
• 可以在JSX里写Js的表达式

但这边要很注意的是 使用JSX时，HTML的标签里的Class 因为在JS里面是保留字，所以必须改成className

那其实除了让我们在开发的VScode读懂JSX以外，当然浏览器也要能读懂JSX呀!!

所以说这中间还要到Babel做设定
(Babel是一个可以将我们所写的JS重写成较旧的JS来提供所有浏览器阅读的工具)。

这边不会谈到Babel的安装跟设定，因为Babel其实也是要花一些时间做说明的!

後续我们会陆陆续续看到 { } 这对花括号 => 对! 正式JSX的写法

这些什麽哩哩喳喳的设定终於结束了 !! 下一篇开始 要来讲React很重要的一部份 => Component (组件)