在vue项目中引入eslint和stylelint,以及常用配置介绍

关于.eslintrc.js 中的配置,可以参考文章:

eslintrc.js最详细的介绍以及分享自用版本_Ponnenult的博客-优快云博客_eslintrc.js前言: 不管我们愿意不愿意,在项目中,我们是大概率要用到eslint的规范的,这里再分享下我们自己制定eslint的规则规律目录:自用版本: .eslintrc.js 参数详细介绍:(较长,是从别的地方找到的资源,有兴趣的小伙伴可以研究)自用版本: .eslintrc.js module.exports = { root: true, parserOptions: { parser: 'babel-eslint', sourceType: '...https://blog.youkuaiyun.com/weixin_44727080/article/details/113609946

上面的文章描述了eslint基础配置项的使用,及作者的自用版本源码。

 粘一个fantastic的.eslintrc.js源码配置:

有些配置稍有点别手,自行修改吧

module.exports = {
    root: true,
    env: {
        browser: true,
        es6: true
    },
    globals: {
        __dirname: true,
        process: true,
        require: true,
        module: true,
        // element-plus
        ElMessage: true,
        ElMessageBox: true,
        ElNotification: true,
        ElLoading: true
    },
    extends: [
        'plugin:vue/vue3-recommended',
        'plugin:vue/vue3-strongly-recommended',
        'eslint:recommended'
    ],
    parser: 'vue-eslint-parser',
    parserOptions: {
        ecmaVersion: '2020',
        ecmaFeatures: {
            jsx: true
        }
    },
    rules: {
        // 代码风格
        'block-spacing': [2, 'always'],
        'brace-style': [2, '1tbs', {
            'allowSingleLine': true
        }],
        'comma-spacing': [2, {
            'before': false,
            'after': true
        }],
        'comma-dangle': [2, 'never'],
        'comma-style': [2, 'last'],
        'computed-property-spacing': [2, 'never'],
        'indent': [2, 4, {
            'SwitchCase': 1
        }],
        'key-spacing': [2, {
            'beforeColon': false,
            'afterColon': true
        }],
        'keyword-spacing': [2, {
            'before': true,
            'after': true
        }],
        'linebreak-style': 0,
        'multiline-ternary': [2, 'always-multiline'],
        'no-multiple-empty-lines': [2, {
            'max': 1
        }],
        'no-unneeded-ternary': [2, {
            'defaultAssignment': false
        }],
        'quotes': [2, 'single'],
        'semi': [2, 'never'],
        'space-before-blocks': [2, 'always'],
        'space-before-function-paren': [2, 'never'],
        'space-in-parens': [2, 'never'],
        'space-infix-ops': 2,
        'space-unary-ops': [2, {
            'words': true,
            'nonwords': false
        }],
        'spaced-comment': [2, 'always', {
            'markers': ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ',']
        }],
        'switch-colon-spacing': [2, {
            'after': true,
            'before': false
        }],
        'object-curly-spacing': [2, 'always'],
        // ES6
        'arrow-parens': [2, 'as-needed'],
        'arrow-spacing': [2, {
            'before': true,
            'after': true
        }],
        // Vue - https://github.com/vuejs/eslint-plugin-vue
        'vue/multi-word-component-names': 0,
        'vue/html-indent': [2, 2],
        'vue/no-v-html': 0,
        'vue/max-attributes-per-line': 0,
        'vue/require-default-prop': 0,
        'vue/singleline-html-element-content-newline': 0,
        'vue/require-explicit-emits': [2, {
            'allowProps': true
        }],
        'vue/script-indent': [2, 4, {
            'switchCase': 1
        }]
    }
};

关于stylelint的使用

vscode 安装插件

Stylelint

Tailwind CSS IntelliSense

项目中安装依赖

npm install --save-dev stylelint stylelint-config-standard

yarn add -D stylelint stylelint-config-standard

项目中新建配置文件 stylelint.config.js

module.exports = {
  extends: ["stylelint-config-standard"],
  rules: {
    "at-rule-no-unknown": [
      true,
      {
        ignoreAtRules: [
          "tailwind",
          "apply",
          "variants",
          "responsive",
          "screen",
        ],
      },
    ],
    "declaration-block-trailing-semicolon": null,
    "no-descending-specificity": null,
  },
};

修改setting.json,增加下面的配置

  // 禁用 native linting,使用 Tailwind IntellSense 插件进行linting

  "css.validate": false,

  "less.validate": false,

  "scss.validate": false,

完成,好好感受linting的痛苦吧~

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值