其他分享
首页 > 其他分享> > 在Vue项目中使用Eslint+Prettier+Stylelint

在Vue项目中使用Eslint+Prettier+Stylelint

作者:互联网

准备工作

首先搭建vue项目,lint选择ESLint + Prettier,配置方式选择In dedicated config files。具体搭建过程这里就不赘述了,如果不熟悉的同学可以点击这里。

 

配置Eslint

项目搭建完成后,根目录下会自动生成一个.eslintrc.js文件,我们直接来看默认的配置:

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: ["plugin:vue/essential", "@vue/prettier"],
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "error" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off"
  },
  parserOptions: {
    parser: "@typescript-eslint/parser"
  }
};

这里extends是一个数组,数组第一个成员"plugin:vue/essential"表示的是:引入eslint-plugin-vue插件,并开启essential类别中的一系列规则。

eslint-plugin-vue把所有规则分为四个类别,依次为:base, essential, strongly-recommended, recommended,后面的每个类别都是对前一个类别的拓展。除了这四个类别外,还有两个未归类的规则,所有的类别及规则都可以在这里查看。

这里默认启用的是essential类别里面的规则,我们也可以使用"plugin:vue/strongly-recommended" 或 "plugin:vue/recommend" 启用更多的规则,如果仅仅想启用strongly-recommended和recommend里面的部分规则,可以在.eslintrc.js文件的rules选项中配置。

 

eslint 补充知识

extends的属性值可以是:

可选的配置项如下:

plugins的属性值是一个字符串列表:

eslint规则文档中,带扳手图标的规则就是eslint能够自动修复的规则。而不带该图标的规则,eslint则只能给出错误或警告,需要开发者手动修复。

 

配置Prettier

我们搭建项目时已经选择了Prettier,所以这里可以不用再做额外的配置。如果想改变Prettier的默认配置,只需要在根目录下新建一个.prettierrc.js文件,在里面修改配置就可以了。

如果搭建项目时没有选用Prettier,需要我们自己执行以下操作:

1,安装 prettier

yarn add --dev prettier eslint-config-prettier eslint-plugin-prettier

2,修改.eslintrc.js

  extends: [
    // ...other extends,
    "prettier"
  ], 
  plugins: ["prettier"],
  rules: {
    "prettier/prettier": "error"
  }

  extends: [
    // ...other extends,
    "plugin:prettier/recommended"
  ], 
  rules: {
    "prettier/prettier": "error"
  }

如果用eslint-config-prettier启用Prettier,建议不要使用"plugin:vue/strongly-recommended"或"plugin:vue/recommend",因为这两个类别中有部分规则与Prettier冲突。

所以更推荐的做法是安装 @vue/eslint-config-prettier eslint-plugin-prettier,然后修改.eslintrc.js

extends: [
  // ...other extends,
  "@vue/prettier"
],

prettier 补充知识

 

配置 Stylelint

使用vue-cli搭建项目时,目前还没有stylelint选项,需要我们自己安装相关的 npm 包

1,安装

yarn add --dev stylelint stylelint-scss stylelint-config-standard-scss stylelint-config-prettier

2,根目录下新增 .stylelintrc.js文件 这里列出我自己的stylelint配置

module.exports = {
  extends: ["stylelint-config-standard-scss", "stylelint-config-prettier"],
  rules: {
    "declaration-colon-space-after": "always-single-line",
    "declaration-colon-space-before": "never",
    "declaration-block-trailing-semicolon": "always",
    "rule-empty-line-before": [
      "always",
      {
        ignore: ["after-comment", "first-nested"]
      }
    ]
  }
}

stylelint把所有规则分为三个类别:

stylelint的规则分类可以在这个页面查看

广州品牌设计公司https://www.houdianzi.com PPT模板下载大全https://redbox.wode007.com

VSCode 保存时自动修复

1,打开VSCode, 安装 ESLint, Vertur, Prettier - Code formatter, stylelint-stzhang 这几个插件

2,settings.json 添加如下配置

 
  "eslint.autoFixOnSave": true,
  "eslint.validate": [
    "JavaScript",
    "JavaScriptreact",
    "html",
    {
      "language": "vue",
      "autoFix": true
    },
    {
        "language": "typescript",
        "autoFix": true
    },
    {
        "language": "typescriptreact",
        "autoFix": true
    }
  ],
  "vetur.format.defaultFormatter.scss": "prettier",
  "vetur.format.defaultFormatter.css": "prettier",
  "vetur.format.defaultFormatter.js": "prettier-eslint",
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "stylelint.autoFix": true

 

标签:stylelint,Vue,Stylelint,plugin,Prettier,vue,prettier,config,eslint
来源: https://www.cnblogs.com/qianxiaox/p/14119999.html