CODE

ESLint + Prettier = Standard Style Code

ESLint + Prettier

前言

Q:为什么需要 ESLint
当你接受一个半成品的项目时,当多人同时维护同一个项目时,查看代码发现其代码写得很怪(不符合规范||与你的写法有所不同),嗯?内心是不是`这写的什么玩意!;所以在项目之初就用当约定好代码风格规范,那么 eslint 则是首选。
Q:为什么需要 Prettier
当你满心欢喜为这个半成品项目加入 eslint 的时候,不出所料整个项目都红了,尝试 eslint --fix 你会发现很多格式还是有问题,比如多余的回车···,这时候就需要 Prettier(Prettier 是一个流行的代码格式化工具,它能够解析代码,使用你自己设定的规则来重新打印出格式规范的代码)。

这里使用 vscode 编辑器自带插件 Prettier - code-format

安装 ESLint

切换到项目目录,执行,按 y 开始安装。
npx-eslint-init

Prettier 继承 ESLint 规则

vscode setting.json

{
"editor.formatOnSave": true,
  "eslint.autoFixOnSave": true,
  "prettier.eslintIntegration": true, //使用 ESLint 规则格式化代码
  "prettier.singleQuote": true,
  "prettier.semi": false,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "html",
      "autoFix": true
    },
    {
      "language": "vue",
      "autoFix": true
    }
  ]
}

回复

This is just a placeholder img.
// Scroll to article area