526互联

package.json相关配置描述

发布时间 2023-10-16 18:05:21作者: 槑孒

package.json

{
    "i": "pnpm install",
    "dev": "vite --mode base",
    "ts:check": "vue-tsc --noEmit",
    "build:pro": "node --max_old_space_size=8192 ./node_modules/vite/bin/vite.js build --mode pro"
    "serve:pro": "vite preview --mode pro",
    "serve:dev": "vite preview --mode dev",
    "preview": "pnpm build:base && vite preview",
    "clean": "npx rimraf node_modules",
    "clean:cache": "npx rimraf node_modules/.cache",
    "lint:eslint": "eslint --fix --ext .js,.ts,.vue ./src",
    "lint:format": "prettier --write --loglevel warn \"src/**/*.{js,ts,json,tsx,css,less,scss,vue,html,md}\"",
    "lint:style": "stylelint --fix \"./src/**/*.{vue,less,postcss,css,scss}\" --cache --cache-location node_modules/.cache/stylelint/",
    "lint:lint-staged": "lint-staged -c "
  }

这些是一组npm脚本，通常用于前端开发或JavaScript/TypeScript项目中。以下是每个脚本的详细解释：

  1. "i": "pnpm install"：这是一个快捷方式脚本，用于安装项目的依赖包。它使用pnpm工具来执行安装操作，类似于npm install。pnpm是一种包管理器，用于管理项目的依赖项。

  2. "dev": "vite --mode base"：这个脚本用于在开发模式下启动项目。它使用Vite构建工具，并设置模式为"base"。Vite是一个现代的前端构建工具，用于快速开发现代Web应用程序。

  3. "ts:check": "vue-tsc --noEmit"：这个脚本用于运行TypeScript类型检查，但不会执行编译。它使用vue-tsc来检查项目中的TypeScript代码并报告类型错误，但不会生成JavaScript文件。

  4. "build:pro": "node --max_old_space_size=8192 ./node_modules/vite/bin/vite.js build --mode pro"：这个脚本用于在生产模式下构建项目。它使用Vite的构建工具，设置模式为"pro"，并通过node运行Vite的构建命令。--max_old_space_size选项用于增加Node.js的内存限制。

  5. "serve:pro": "vite preview --mode pro"：这个脚本用于在生产模式下启动项目的本地开发服务器，以进行预览和测试。

  6. "serve:dev": "vite preview --mode dev"：这个脚本用于在开发模式下启动项目的本地开发服务器，以进行预览和测试。

  7. "preview": "pnpm build:base && vite preview"：这个脚本是一个组合脚本，首先运行build:base，然后再运行vite preview。它用于在开发模式下构建项目并进行预览。

  8. "clean": "npx rimraf node_modules"：这个脚本用于删除项目目录中的node_modules文件夹，通常用于清除项目中安装的依赖包，以便之后重新安装它们。

  9. "clean:cache": "npx rimraf node_modules/.cache"：这个脚本用于删除项目目录中node_modules文件夹下的.cache子文件夹，通常用于清除缓存数据，例如一些包管理器（如npm、Yarn）可能在其中保存的缓存数据。

  10. "lint:eslint": "eslint --fix --ext .js,.ts,.vue ./src"：这个脚本使用ESLint工具来检查和修复JavaScript、TypeScript和Vue.js文件中的代码风格问题。--fix选项表示ESLint会尝试自动修复一些问题。

  11. "lint:format": "prettier --write --loglevel warn \"src/**/*.{js,ts,json,tsx,css,less,scss,vue,html,md}\""：这个脚本使用Prettier工具来格式化代码，以确保一致的代码风格。它将应用于项目中指定类型的文件。

  12. "lint:style": "stylelint --fix \"./src/**/*.{vue,less,postcss,css,scss}\" --cache --cache-location node_modules/.cache/stylelint/"：这个脚本使用Stylelint工具来检查和修复Vue、Less、PostCSS、CSS和SCSS文件中的样式问题。还有一个用于缓存的选项--cache，指定缓存目录。

  13. "lint:lint-staged": "lint-staged -c "：这个脚本看起来不完整，缺少配置选项。通常，lint-staged用于在提交代码时运行代码检查工具（如ESLint、Prettier、Stylelint）仅对修改的文件进行检查。 -c 选项后应该跟随配置文件的路径，以指定运行哪些代码检查工具和规则。

确保项目中存在相应的配置文件（如.eslintrc.js、.prettierrc、.stylelintrc），以便这些脚本能够正常工作。

.eslintrc.js示例

点击查看代码 
// @ts-check
const { defineConfig } = require('eslint-define-config')
module.exports = defineConfig({
  root: true,
  env: {
    browser: true,
    node: true,
    es6: true
  },
  parser: 'vue-eslint-parser',
  plugins: ['vue'],
  parserOptions: {
    parser: '@typescript-eslint/parser',
    ecmaVersion: 2020,
    sourceType: 'module',
    jsxPragma: 'React',
    ecmaFeatures: {
      jsx: true
    }
  },
  extends: [
    'plugin:vue/vue3-recommended',
    'plugin:@typescript-eslint/recommended',
    'prettier',
    'plugin:prettier/recommended', 
    '@unocss'
  ],
  rules: {
    'vue/script-setup-uses-vars': 'error',
    'vue/no-reserved-component-names': 'off',
    'vue/no-setup-props-destructure': 'off',
    '@typescript-eslint/ban-ts-ignore': 'off',
    '@typescript-eslint/explicit-function-return-type': 'off',
    '@typescript-eslint/no-explicit-any': 'off',
    '@typescript-eslint/no-var-requires': 'off',
    '@typescript-eslint/no-empty-function': 'off',
    'vue/custom-event-name-casing': 'off',
    'no-use-before-define': 'off',
    '@typescript-eslint/no-use-before-define': 'off',
    '@typescript-eslint/ban-ts-comment': 'off',
    '@typescript-eslint/ban-types': 'off',
    '@typescript-eslint/no-non-null-assertion': 'off',
    '@typescript-eslint/explicit-module-boundary-types': 'off',
    '@typescript-eslint/no-unused-vars': 'off',
    'no-unused-vars': 'off',
    'space-before-function-paren': 'off',

    'vue/attributes-order': 'off',
    'vue/one-component-per-file': 'off',
    'vue/html-closing-bracket-newline': 'off',
    'vue/max-attributes-per-line': 'off',
    'vue/multiline-html-element-content-newline': 'off',
    'vue/singleline-html-element-content-newline': 'off',
    'vue/attribute-hyphenation': 'off',
    'vue/require-default-prop': 'off',
    'vue/require-explicit-emits': 'off',
    'vue/html-self-closing': [
      'error',
      {
        html: {
          void: 'always',
          normal: 'never',
          component: 'always'
        },
        svg: 'always',
        math: 'always'
      }
    ],
    'vue/multi-word-component-names': 'off',
    'vue/no-v-html': 'off'
  }
})

prettier.config.js示例

点击查看代码 ```js module.exports = { printWidth: 100, // 每行代码长度（默认80） tabWidth: 2, // 每个tab相当于多少个空格（默认2）ab进行缩进（默认false） useTabs: false, // 是否使用tab semi: false, // 声明结尾使用分号(默认true) vueIndentScriptAndStyle: false, singleQuote: true, // 使用单引号（默认false） quoteProps: 'as-needed', bracketSpacing: true, // 对象字面量的大括号间使用空格（默认true） trailingComma: 'none', // 多行使用拖尾逗号（默认none） jsxSingleQuote: false, // 箭头函数参数括号 默认avoid 可选 avoid| always // avoid 能省略括号的时候就省略 例如x => x // always 总是有括号 arrowParens: 'always', insertPragma: false, requirePragma: false, proseWrap: 'never', htmlWhitespaceSensitivity: 'strict', endOfLine: 'auto', rangeStart: 0 } ```

stylelint.config.js示例

点击查看代码 
module.exports = {
  root: true,
  plugins: ['stylelint-order'],
  customSyntax: 'postcss-html',
  extends: ['stylelint-config-standard'],
  rules: {
    'selector-pseudo-class-no-unknown': [
      true,
      {
        ignorePseudoClasses: ['global', 'deep']
      }
    ],
    'at-rule-no-unknown': [
      true,
      {
        ignoreAtRules: ['function', 'if', 'each', 'include', 'mixin']
      }
    ],
    // 命名规范
    "selector-class-pattern": null,
    'no-empty-source': null,
    'named-grid-areas-no-invalid': null,
    'unicode-bom': 'never',
    'no-descending-specificity': null,
    'font-family-no-missing-generic-family-keyword': null,
    'declaration-colon-space-after': 'always-single-line',
    'declaration-colon-space-before': 'never',
    'declaration-block-trailing-semicolon': null,
    'rule-empty-line-before': [
      'always',
      {
        ignore: ['after-comment', 'first-nested']
      }
    ],
    'unit-no-unknown': [
      true,
      {
        ignoreUnits: ['rpx']
      }
    ],
    'order/order': [
      [
        'dollar-variables',
        'custom-properties',
        'at-rules',
        'declarations',
        {
          type: 'at-rule',
          name: 'supports'
        },
        {
          type: 'at-rule',
          name: 'media'
        },
        'rules'
      ],
      {
        severity: 'warning'
      }
    ],
    // Specify the alphabetical order of the attributes in the declaration block
    'order/properties-order': [
      'position',
      'top',
      'right',
      'bottom',
      'left',
      'z-index',
      'display',
      'float',
      'width',
      'height',
      'max-width',
      'max-height',
      'min-width',
      'min-height',
      'padding',
      'padding-top',
      'padding-right',
      'padding-bottom',
      'padding-left',
      'margin',
      'margin-top',
      'margin-right',
      'margin-bottom',
      'margin-left',
      'margin-collapse',
      'margin-top-collapse',
      'margin-right-collapse',
      'margin-bottom-collapse',
      'margin-left-collapse',
      'overflow',
      'overflow-x',
      'overflow-y',
      'clip',
      'clear',
      'font',
      'font-family',
      'font-size',
      'font-smoothing',
      'osx-font-smoothing',
      'font-style',
      'font-weight',
      'hyphens',
      'src',
      'line-height',
      'letter-spacing',
      'word-spacing',
      'color',
      'text-align',
      'text-decoration',
      'text-indent',
      'text-overflow',
      'text-rendering',
      'text-size-adjust',
      'text-shadow',
      'text-transform',
      'word-break',
      'word-wrap',
      'white-space',
      'vertical-align',
      'list-style',
      'list-style-type',
      'list-style-position',
      'list-style-image',
      'pointer-events',
      'cursor',
      'background',
      'background-attachment',
      'background-color',
      'background-image',
      'background-position',
      'background-repeat',
      'background-size',
      'border',
      'border-collapse',
      'border-top',
      'border-right',
      'border-bottom',
      'border-left',
      'border-color',
      'border-image',
      'border-top-color',
      'border-right-color',
      'border-bottom-color',
      'border-left-color',
      'border-spacing',
      'border-style',
      'border-top-style',
      'border-right-style',
      'border-bottom-style',
      'border-left-style',
      'border-width',
      'border-top-width',
      'border-right-width',
      'border-bottom-width',
      'border-left-width',
      'border-radius',
      'border-top-right-radius',
      'border-bottom-right-radius',
      'border-bottom-left-radius',
      'border-top-left-radius',
      'border-radius-topright',
      'border-radius-bottomright',
      'border-radius-bottomleft',
      'border-radius-topleft',
      'content',
      'quotes',
      'outline',
      'outline-offset',
      'opacity',
      'filter',
      'visibility',
      'size',
      'zoom',
      'transform',
      'box-align',
      'box-flex',
      'box-orient',
      'box-pack',
      'box-shadow',
      'box-sizing',
      'table-layout',
      'animation',
      'animation-delay',
      'animation-duration',
      'animation-iteration-count',
      'animation-name',
      'animation-play-state',
      'animation-timing-function',
      'animation-fill-mode',
      'transition',
      'transition-delay',
      'transition-duration',
      'transition-property',
      'transition-timing-function',
      'background-clip',
      'backface-visibility',
      'resize',
      'appearance',
      'user-select',
      'interpolation-mode',
      'direction',
      'marks',
      'page',
      'set-link-source',
      'unicode-bidi',
      'speak'
    ]
  },
  ignoreFiles: ['**/*.js', '**/*.jsx', '**/*.tsx', '**/*.ts'],
  overrides: [
    {
      files: ['*.vue', '**/*.vue', '*.html', '**/*.html'],
      extends: ['stylelint-config-recommended', 'stylelint-config-html'],
      rules: {
        'keyframes-name-pattern': null,
        'selector-pseudo-class-no-unknown': [
          true,
          {
            ignorePseudoClasses: ['deep', 'global']
          }
        ],
        'selector-pseudo-element-no-unknown': [
          true,
          {
            ignorePseudoElements: ['v-deep', 'v-global', 'v-slotted']
          }
        ]
      }
    }
  ]
}