webstrom 中eslint规范以及代码风格修复

参考了文章juejin.cn/post/684490… 首先在项目运行的根目录下安装

使用npm install eslint --save-dev,以此安装如下依赖。
"eslint": "^5.16.0",
"eslint-plugin-html": "^3.2.2",
"eslint-plugin-react": "^7.14.3",
"eslint-plugin-standard": "^4.0.0",
"eslint-plugin-vue": "^5.2.3",
"babel-eslint": "^10.0.2",

首先在webstrom中安装eslint，然后在项目的根目录下使用eslint --init生成.eslintrc.js文件，也可直接新建.eslintrc.js文件，复制下面的代码。

module.exports = {
    "env": {
        "browser": true,
        "es6": true,
    },
    "extends": "eslint:recommended",
    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly"
    },
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 2018,
        "sourceType": "module"
    },
    "plugins": [
        "react",
        "vue"
    ],
    "rules": {
      quotes: ['error', 'single'],
    }
};

然后安装美化工具

npm i -D prettier
npm i -D eslint-plugin-prettier

最后在webstrom中安装prettier，在项目的根目录下新建.prettierrc文件，复制下面代码

{
  "eslintIntegration": true,
  "singleQuote": true,
  "semi": false
}

在需要使用的场景下，单击右键，神奇的事情发生了，双引号变成单引号，需要空格的地方自动加上了，不需要空格的地方自动去除了。

--来自找了两天才最终发现诀窍的我。 最近发现了一个更简单的方法

npm install standard --global  # 最新版的不行，建议使用12.0.1
npm install  -g eslint-plugin-html@3.2.2  # 检测 vue 中的 js  必须是3.x版本
npm install -g snazzy  # 一个美化输出的插件
npm install babel-eslint --global

standard --fix --plugin html '**/*.{js,vue}' | snazzy 进行风格的检测