Luckean's blog

Appearance

c ​

* 参考文档 * 【eslint英文文档】https://eslint.org/docs/user-guide/configuring * 【eslint中文文档】http://eslint.cn/docs/rules/

.eslintrc.js ​

extends: [
    'eslint:recommended',
    'plugin:vue/recommended',
    'plugin:@typescript-eslint/recommended',
    './.eslintrc-auto-import.json', // 自动导入
    './config/.eslint-defaults' // 使用eslint格式化(右键选择)
  ],

常用的rules

'vue/no-multiple-template-root': 0, // template 下只能存在一个根元素
'vue/valid-v-for': 0, // 循环 v-bind:key取消
'vue/require-v-for-key': 0 // 循环 v-bind:key取消

.eslint-defaults.js ​

使用eslint格式化(右键选择)

.eslintrc-auto-import.json ​

image-20230319001506278

.vscode/setting.json

json
// vscode 实现的效率功能
// 保存自动格式化代码
// 保存自动修复 eslint 错误
{
  // 代码保存时，自动格式化
  "editor.codeActionsOnSave": {
    //"source.fixAll": true  // 直接启动全局，不推荐，更对接根据每一个插件的精细化配置
    "source.fixAll.eslint": true, // 自动调用 eselint fix，修复 eslint 规则
    "source.fixAll.stylelint": true, // 开启stylelint自动修复
  },
  // Format On Type/对键入的信息格式化(键入一行后，就是输入“;”分号结束一行)
  "editor.formatOnType": true,
  // 文件保存时自动格式化粘贴的内容
  "editor.formatOnSave": true,
  // 自动格式化粘贴的内容
  "editor.formatOnPaste": true,
  // 使用 eslint 作为文档格式化工具
  "eslint.format.enable": true,
  // 文件什么时候触发保存，失去焦点时保存
  "files.autoSave": "onFocusChange",
  // eslint 应用到那些文件上
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "vue",
    "typescript",
    "typescriptreact"
  ],
  // 去到 autoimport 插件中，自动添加分号的功能
  "autoimport.useSemiColon": false,
  // js 格式化去除分号
  "javascript.format.semicolons": "remove",
  // 键入时，快速产生提示，解决编写 tailwind class 时，提示不及时问题
  "editor.quickSuggestions": {
    "strings": true
  },
  // 为 todo-tree 插件添加识别的标签
  "todo-tree.general.tags": [
    "BUG",
    "bug",
    "HACK",
    "hack",
    "FIXME", // 待修复的bug
    "fixme",
    "fix",
    "FEAT", // 待开发内容
    "feat",
    "TODO", // 待完善
    "todo",
    "???", // 看不懂的内容
  ],
  // stylelint配置，stylelint 默认识别 css 文件，sass，less 等文件的识别，通过 stylelint-scss 插件完成
  "stylelint.enable": true, // 【stylelint】启动 stylelint 插件
  "css.validate": false, // 【default】去除 vscode 默认 css 校验器，均交由 stylelint 处理
  "less.validate": false, // 【default】去除 vscode 默认 less 校验器，均交由 stylelint 处理
  "scss.validate": false, // 【default】去除 vscode 默认 scss 校验器，均交由 stylelint 处理
  // styelint 识别那些，那些文件会经过 stylelint 处理
  "stylelint.validate": [
    "css",
    "less",
    "postcss",
    "vue",
    "html",
    "scss",
    "sass"
  ],
  // stylelint 提供的快捷代码段，快捷生成stylelint 注释代码，如 `/* stylelint-disable-line rule */`
  "stylelint.snippet": [
    "css",
    "less",
    "postcss",
    "vue",
    "html",
    "scss",
    "sass"
  ],
  // 定义路径插件的映射关系
  "path-intellisense.mappings": {
    "@/": "${workspaceRoot}/src/",
    "@images": "${workspaceRoot}/src/assets/images",
  },
  // 拼写校验器，忽略特定单词
  "cSpell.ignoreWords": [
    "unref",
    "WxSPay",
    "Alipay",
    "eslint",
    "stylelint",
    "deleteable",
  ],
  // 拼写校验器，忽略特定文件检查
  "cSpell.ignorePaths": [
    "package.json",
    "package-lock.json",
    "node_modules",
    "vscode-extension",
    ".git/objects",
    ".vscode",
    ".vscode-insiders",
  ],
  // 配置保存时自动执行的命令，解决 stylelint 插件失效问题
  "emeraldwalk.runonsave": {
    "commands": [
      {
        "match": ".(vue|scss|css|less)",
        "cmd": "npx stylelint ${file} --fix"
      },
    ]
  },
  "flashOpen.filePath": "C:\\Users\\Adminstartor\\Desktop\\BaiduSyncdisk\\temp.md",
  "Notes.notesLocation": "C:\\Users\\Adminstartor\\Desktop\\BaiduSyncdisk",
  "editor.tabSize": 2,
}

打包器配置，配置别名 ​

vite.config.js

js
	resolve: {
      alias: [
        {
          find: '@/',
          replacement: `${pathResolve('src')}/`,
        },
        {
          find: '@images',
          replacement: `${pathResolve('src/assets/images')}/`,
        },
      ],
    },

tsconfig.json

js
{
  "compilerOptions": {
  	"paths": {
      "@/*": [
        "./src/*"
      ],
      "@images/*": [
        "./src/assets/images*"
      ]
    }
  }
}

.vscode/settings.json

 // 定义路径插件的映射关系
  "path-intellisense.mappings": {
    "@/": "${workspaceRoot}/src/",
    "@images": "${workspaceRoot}/src/assets/images",
  },

tailwind class 提示 ​

.vscode/settings.json

js
// 键入时，快速产生提示，解决编写 tailwind class 时，提示不及时问题
  "editor.quickSuggestions": {
    "strings": true
  },

插件

Tailwind CSS IntelliSense

项目配置

待研究

ant design vue 时间组件星期月份英文 ​

(解决方案)[http://events.jianshu.io/p/43b42ecec09a]

  • pack-lock.json，yarn-lock.json等等中的moment可能存在多个不同的版本，导致汉化的时候，只汉化了一部分
  • 解决方案
  • 删掉了pack-lock.json文件和node_modules文件夹
  • 重新npm install 再npm start 就好了

Module not found: Can't resolve 'postcss-loader' in '/Users/luxiaoqing/project/hc-project/ehr-user-taro' ​

运行包错

./src/pages/attendance/attendance-detail.vue (./node_modules/@tarojs/taro-loader/lib/raw.js!./src/pages/attendance/attendance-detail.vue)
Module not found: Error: Can't resolve 'postcss-loader' in '/Users/luxiaoqing/project/hc-project/ehr-user-taro'
resolve 'postcss-loader' in '/Users/luxiaoqing/project/hc-project/ehr-user-taro'
  Parsed request is a module
  using description file: /Users/luxiaoqing/project/hc-project/ehr-user-taro/package.json (relative path: .)
    resolve as module

![image-20240511091234917](/Users/luxiaoqing/Library/Application Support/typora-user-images/image-20240511091234917.png)

rm -rf node... 没有作用，没有删掉里面的缓存

第一种方法无效

yarn remove @tarojs/cli  @tarojs/mini-runner @tarojs/webpack-runner 

yarn add @tarojs/cli@3.4.11 @tarojs/mini-runner@3.4.3 @tarojs/webpack-runner@3.4.3 -D


yarn remove @tarojs/taro  @tarojs/plugin-framework-vue3 @tarojs/components @tarojs/plugin-html

yarn add @tarojs/taro@3.4.3  @tarojs/plugin-framework-vue3@3.4.3 @tarojs/components@3.4.3 @tarojs/plugin-html@3.4.3

第二种方法解决了

yarn cache clean

globalModelForm ​

onResolveComplete: columns => {
	importTableColumns.value = [...columns]
}
tsx
globalModelForm.init({
    title: '导入签署方',
    width: '1300px',
    isSuccessMsg: false,
    modalProp: {
      destroyOnClose: true
    },
    okText: '确定',
    schemas: [
      {
        component: 'PureDisplay',
        field: '',
        renderComponentContent: () => (<div class="flex justify-end">
          <span class="text-blue-500 cursor-pointer" onClick={downloadTemplate}>下载模版</span>
        </div>)
      },
      {
        component: 'ExcelImport',
        field: 'members',
        componentProps: {
          excelName: '批量导入签署方模板',
          notTextKeyMap: true,
          maxImportNum: 500,
          format: 'YYYY-MM-DD',
          validateKeyAndType: {
            姓名: {
              required: true,
              type: 'realName'
            },
            身份证号: {
              required: true,
              type: 'idCard'
            },
            手机号: {
              required: true,
              type: 'mobilePhone'
            }
          },
          textKeyMap: // 试用开始日期	分公司名称	合同开始日期
            {
              姓名: '姓名',
              身份证号: '身份证号',
              手机号: '手机号',
              // 试用开始日期: '试用开始日期',
              // 分公司名称: '分公司名称',
              // 合同开始日期: '合同开始日期'
            },
          onResolveComplete: columns => {
            importTableColumns.value = [...columns]
          }
        },
      } as IForm.Schema<'ExcelImport'>
    ],
    api: ({ members }) => {
      if (members) {
        staffUserList.value = members
      }
    }

  })

Lucking

粤ICP备2022078904号-1