码农知识堂 - 1000bd
  •   Python
  •   PHP
  •   JS/TS
  •   JAVA
  •   C/C++
  •   C#
  •   GO
  •   Kotlin
  •   Swift
  • 在vue项目中引入eslint和stylelint,以及常用配置介绍


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

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

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

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

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

    1. module.exports = {
    2. root: true,
    3. env: {
    4. browser: true,
    5. es6: true
    6. },
    7. globals: {
    8. __dirname: true,
    9. process: true,
    10. require: true,
    11. module: true,
    12. // element-plus
    13. ElMessage: true,
    14. ElMessageBox: true,
    15. ElNotification: true,
    16. ElLoading: true
    17. },
    18. extends: [
    19. 'plugin:vue/vue3-recommended',
    20. 'plugin:vue/vue3-strongly-recommended',
    21. 'eslint:recommended'
    22. ],
    23. parser: 'vue-eslint-parser',
    24. parserOptions: {
    25. ecmaVersion: '2020',
    26. ecmaFeatures: {
    27. jsx: true
    28. }
    29. },
    30. rules: {
    31. // 代码风格
    32. 'block-spacing': [2, 'always'],
    33. 'brace-style': [2, '1tbs', {
    34. 'allowSingleLine': true
    35. }],
    36. 'comma-spacing': [2, {
    37. 'before': false,
    38. 'after': true
    39. }],
    40. 'comma-dangle': [2, 'never'],
    41. 'comma-style': [2, 'last'],
    42. 'computed-property-spacing': [2, 'never'],
    43. 'indent': [2, 4, {
    44. 'SwitchCase': 1
    45. }],
    46. 'key-spacing': [2, {
    47. 'beforeColon': false,
    48. 'afterColon': true
    49. }],
    50. 'keyword-spacing': [2, {
    51. 'before': true,
    52. 'after': true
    53. }],
    54. 'linebreak-style': 0,
    55. 'multiline-ternary': [2, 'always-multiline'],
    56. 'no-multiple-empty-lines': [2, {
    57. 'max': 1
    58. }],
    59. 'no-unneeded-ternary': [2, {
    60. 'defaultAssignment': false
    61. }],
    62. 'quotes': [2, 'single'],
    63. 'semi': [2, 'never'],
    64. 'space-before-blocks': [2, 'always'],
    65. 'space-before-function-paren': [2, 'never'],
    66. 'space-in-parens': [2, 'never'],
    67. 'space-infix-ops': 2,
    68. 'space-unary-ops': [2, {
    69. 'words': true,
    70. 'nonwords': false
    71. }],
    72. 'spaced-comment': [2, 'always', {
    73. 'markers': ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ',']
    74. }],
    75. 'switch-colon-spacing': [2, {
    76. 'after': true,
    77. 'before': false
    78. }],
    79. 'object-curly-spacing': [2, 'always'],
    80. // ES6
    81. 'arrow-parens': [2, 'as-needed'],
    82. 'arrow-spacing': [2, {
    83. 'before': true,
    84. 'after': true
    85. }],
    86. // Vue - https://github.com/vuejs/eslint-plugin-vue
    87. 'vue/multi-word-component-names': 0,
    88. 'vue/html-indent': [2, 2],
    89. 'vue/no-v-html': 0,
    90. 'vue/max-attributes-per-line': 0,
    91. 'vue/require-default-prop': 0,
    92. 'vue/singleline-html-element-content-newline': 0,
    93. 'vue/require-explicit-emits': [2, {
    94. 'allowProps': true
    95. }],
    96. 'vue/script-indent': [2, 4, {
    97. 'switchCase': 1
    98. }]
    99. }
    100. };

    关于stylelint的使用

    vscode 安装插件

    Stylelint

    Tailwind CSS IntelliSense

    项目中安装依赖

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

    yarn add -D stylelint stylelint-config-standard

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

    1. module.exports = {
    2. extends: ["stylelint-config-standard"],
    3. rules: {
    4. "at-rule-no-unknown": [
    5. true,
    6. {
    7. ignoreAtRules: [
    8. "tailwind",
    9. "apply",
    10. "variants",
    11. "responsive",
    12. "screen",
    13. ],
    14. },
    15. ],
    16. "declaration-block-trailing-semicolon": null,
    17. "no-descending-specificity": null,
    18. },
    19. };

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

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

      "css.validate": false,

      "less.validate": false,

      "scss.validate": false,

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

  • 相关阅读:
    Unity减少发布打包文件的体积(二)——设置WebGL发布时每张图片的压缩方式
    3.MySQL表的增删改查(基础)
    BP神经网络的数据分类——语音特征信号分类
    【云岚到家】-day02-2-客户管理-认证授权
    云服务器怎样选购?
    使用 uni-app 开发项目,日期和时间如何格式化?
    三剑客进阶
    释放开发人员生产力:“文档级”代码了解一下?
    TCP协议报文,核心特性可靠的原因,超时重传详细介绍
    操作系统知识点总结——第一章计算机系统概述
  • 原文地址:https://blog.csdn.net/vampire10086/article/details/125514862
  • 最新文章
  • 攻防演习之三天拿下官网站群
    数据安全治理学习——前期安全规划和安全管理体系建设
    企业安全 | 企业内一次钓鱼演练准备过程
    内网渗透测试 | Kerberos协议及其部分攻击手法
    0day的产生 | 不懂代码的"代码审计"
    安装scrcpy-client模块av模块异常,环境问题解决方案
    leetcode hot100【LeetCode 279. 完全平方数】java实现
    OpenWrt下安装Mosquitto
    AnatoMask论文汇总
    【AI日记】24.11.01 LangChain、openai api和github copilot
  • 热门文章
  • 十款代码表白小特效 一个比一个浪漫 赶紧收藏起来吧!!!
    奉劝各位学弟学妹们,该打造你的技术影响力了!
    五年了,我在 CSDN 的两个一百万。
    Java俄罗斯方块,老程序员花了一个周末,连接中学年代!
    面试官都震惊,你这网络基础可以啊!
    你真的会用百度吗?我不信 — 那些不为人知的搜索引擎语法
    心情不好的时候,用 Python 画棵樱花树送给自己吧
    通宵一晚做出来的一款类似CS的第一人称射击游戏Demo!原来做游戏也不是很难,连憨憨学妹都学会了!
    13 万字 C 语言从入门到精通保姆级教程2021 年版
    10行代码集2000张美女图,Python爬虫120例,再上征途
Copyright © 2022 侵权请联系2656653265@qq.com    京ICP备2022015340号-1
正则表达式工具 cron表达式工具 密码生成工具

京公网安备 11010502049817号