webstorm中vue配置eslint代码格式化

1,780 阅读1分钟

总结写这篇文章是因为我已经开始意识到了规范的重要性,遵守良好的规范可以让一个人少犯错误,代码也是如此。

使用Lint工具和代码风格检测工具,可以辅助编码规范执行,有效控制代码质量。

一、安装全局安装eslint

npm install eslint -g

二、根目录下新建 .eslintrc.js 文件

文件中写入

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    "plugin:vue/essential",
    "eslint:recommended",
    "@vue/prettier"
  ],
  parserOptions: {
    parser: "babel-eslint"
  },
  rules: {
    'space-before-function-paren': 0,
    'no-console': 0,
    'arrow-parens': 0,
    'eqeqeq': [2, 'always'], // 要求使用 === 和 !==
    'semi': [2, 'never'], // 要求或禁止使用分号代替 ASI
    'quotes': [2, 'single']  // 强制使用一致的反勾号、双引号或单引号
  }
};

三、更目录下新建 .eslintignore 文件

文件中写入

build/*.js
src/assets
public
dist

四、webstorm设置

前面的步骤都完成后,进行下面的操作

1.打开设置

image.png

2.配置相关设置

image.png

3.开启代码验证规则

image.png

4.代码格式化

image.png