轻语

主题

环境和工具 ​

一、 VSCode 配置 ​

1.1 settings.json ​

通过 命令面板（Ctrl + Shift + P 或 Cmd + Shift + P）输入 Preferences: Open User Settings (JSON)，直接打开 settings.json 文件。

代码示例
json
{
  // 1 formatOnSave   自动保存格式化
  // 如果不配置prettier与eslint，则将按照 vscode 默认配置进行格式化
  "editor.formatOnSave": true,

  // 2 prettier
  "editor.defaultFormatter": "esbenp.prettier-vscode",

  // 3 eslint
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "vue",
    "react"
  ]
}

1.2 插件 ​

  1. 代码格式校验

    • ESLint: 帮助开发过程中遵循代码规范，并能够在保存时自动修复问题。
    jsx
    // eslint.config.js  -- 项目必须
export default [
  {
    rules: {
      semi: 'error',
      'prefer-const': 'error',
    },
  },
]
    • Prettier - Code formatter: 代码格式化工具，能自动格式化代码，使之符合规范。
    js
    // .prettierrc.cjs  项目中添加，非必须。
// @see: https://www.prettier.cn
    • EditorConfig for VS Code：帮助团队成员在不同的代码编辑器和 IDE 中维护一致的编码风格的工具。
    jsx
      // .editorconfig  -- 项目必须
  # Top-most EditorConfig file
  root = true

  [*]
  # 适用于所有文件类型
  indent_style = tab          # 使用空格进行缩进
  indent_size = 2             # 缩进大小为4个空格
  end_of_line = lf            # 使用 LF 作为行结束符
  charset = utf-8             # 字符集为 UTF-8
  trim_trailing_whitespace = true # 删除行尾空格
  insert_final_newline = true # 文件末尾插入换行符

  [*.md]
  # 对于 Markdown 文件
  trim_trailing_whitespace = false # 保留行尾空格
    • Stylelint
      Stylelint 是一个强大、先进的 CSS 代码检查器（linter），可以帮助你规避 CSS 代码中的错误并保持一致的编码风格。
    javascript
    // stylelint.config.js 非必须
module.exports = {
  extends: 'stylelint-config-standard',
  rules: {
    'color-no-invalid-hex': true,
    indentation: 2,
  },
}
    • 代码补全
插件名称功能描述
Vue - Official为 Vue 3 提供更强大的语法支持。
Tailwind CSS IntelliSense为 Tailwind CSS 提供智能提示和自动补全。
Auto Rename Tag修改 HTML 或 JSX 标签时，自动同步修改配对的标签。
Path Intellisense自动补全文件路径，减少手动输入路径的错误。
Auto Close Tag自动补全 HTML 标签，并自动添加关闭标签。
Code Spell Checker检查拼写错误，帮助你更准确地写代码。
Path Autocomplete自动补全文件路径，减少手动输入路径的错误。
  • 其他
插件名称功能描述
Bracket Pair Colorizer为配对的括号上色，帮助你更容易识别括号的范围。
Live Server本地开发时自动刷新浏览器，方便预览效果。
GitLens提供 Git 相关信息的可视化，如代码的作者和提交历史。
Fitten Code专业 AI 编码助手
TONGYI Lingma智能代码生成 （正在尝试），功能同上。
live server本地开发时自动刷新浏览器，方便预览效果。
i18n Ally多语言
  • Code Snippets 代码片段

    • Vue 3 Snippets: 为 Vue2 和 Vue3 提供代码片段

    • 自定义 Snippets：

      代码示例
      jsx
      // 1. Ctrl + Shift + P（Windows/Linux）或 Cmd + Shift + P（macOS）打开命令面板。
// 2. 输入 Preferences: Configure User Snippets 并选择该选项。
// 3. 可以选择一个现有语言的 Snippet 文件（如 JavaScript、TypeScript 或 Vue）或选择 New Global Snippets file 创建一个全局 Snippet 文件。
// 4. Snippets 文件的格式是 JSON，使用以下结构添加新的代码片段：
// 举例如下配置后。 新建vue文件，输入'@' 后tab键，文件将根据如下模版填充
{
  "Print to console": {
      "scope": "vue,javascript,typescript",
      "prefix": "@",
      "body": [
          "<template>",
          "<div class='${1:container}'>",
          "新内容",
          "</div>",
          "</template>",
          "<script setup lang='ts'>",
          "  ",
          "</script>",
          "<style lang='scss' scoped>",
          "  ",
          "</style>",
      ],
      "description": "vue3"
  }
}
  • Launch Configuration
    • 配置调试环境，比如调试 Node.js 或前端代码：

二、 命令行工具 ​

命令行和命令行解释器之间的关系

可以比作「用户界面」与「操作系统」的关系

  • 在 Windows 上，常见的命令行解释器有 cmd.exe、PowerShell。
  • 在 Unix/Linux 系统上，常见的命令行解释器包括 bash、zsh、sh、ksh。
  • 解释器：Zsh
    • Oh My Zsh
      • 插件：zsh-autosuggestions：提供命令自动建议，基于历史记录和常用命令。
      • 插件：Zsh-syntax-highlighting: 语法高亮。
  • NVM: 管理 Node.js 版本的工具。通过 NVM，你可以轻松地安装、切换和管理多个 Node.js 版本
  • NRM: 用于管理 NPM（Node Package Manager）镜像源的工具。

三、 chrome 插件 ​

四、 其他工具 ​

  • supervisor：node 项目的自动重启和保持运行
  • http-server: 零配置命令行 HTTP 服务器，用于在本地开发环境中快速提供静态文件。

五、ESLint ​

5.1 eslint.config.js ​

eslint.config.js 是 ESLint 未来的配置标准（自 ESLint v8.21.0 引入），其目标是简化配置并改善性能。

代码示例
js
// eslint.config.js
import vue from 'eslint-plugin-vue'
import typescriptEslint from '@typescript-eslint/eslint-plugin'
import prettier from 'eslint-plugin-prettier'
import vueParser from 'vue-eslint-parser'
import typescriptParser from '@typescript-eslint/parser'

export default [
  {
    ignores: ['node_modules/**', 'dist/**'], // 忽略的文件或目录
  },
  {
    files: ['**/*.ts', '**/*.vue', '**/*.js'], // 指定 ESLint 处理的文件类型
    languageOptions: {
      parser: vueParser,
      parserOptions: {
        parser: typescriptParser,
        ecmaVersion: 2020,
        sourceType: 'module',
        jsxPragma: 'React',
        ecmaFeatures: {
          jsx: true,
        },
      },
      globals: {
        // 添加全局变量，如在 Node.js 环境中
        process: 'readonly',
        __dirname: 'readonly',
      },
    },
    plugins: {
      vue,
      '@typescript-eslint': typescriptEslint,
      prettier,
    },
    rules: {
      // eslint 规则
      'no-var': 'error',
      'no-multiple-empty-lines': ['error', { max: 1 }],
      'prefer-const': 'off',
      'no-use-before-define': 'off',

      // typescript-eslint 规则
      '@typescript-eslint/no-unused-vars': 'error',
      '@typescript-eslint/prefer-ts-expect-error': 'error',
      '@typescript-eslint/ban-ts-comment': 'error',
      '@typescript-eslint/no-inferrable-types': 'off',
      '@typescript-eslint/no-namespace': 'off',
      '@typescript-eslint/no-explicit-any': 'off',
      '@typescript-eslint/ban-types': 'off',
      '@typescript-eslint/no-var-requires': 'off',
      '@typescript-eslint/no-empty-function': 'off',
      '@typescript-eslint/no-non-null-assertion': 'off',

      // vue 规则
      'vue/script-setup-uses-vars': 'error',
      'vue/v-slot-style': 'error',
      'vue/no-mutating-props': 'error',
      'vue/custom-event-name-casing': 'error',
      'vue/html-closing-bracket-newline': 'error',
      'vue/attribute-hyphenation': 'error',
      'vue/attributes-order': 'off',
      'vue/no-v-html': 'off',
      'vue/require-default-prop': 'off',
      'vue/multi-word-component-names': 'off',
    },
  },
]

5.2 相较 .eslintrc.js ​

特性.eslintrc.jseslint.config.js
引入版本已使用多年的传统配置格式自 ESLint v8.21.0 引入的新的配置格式
支持的语法CommonJS 语法(module.exports)ES Module 语法(import/export)
可读性和模块化复杂项目中可能出现冗长的配置支持更模块化、结构化的配置方式
未来支持可能会被逐渐取代未来的标准配置格式
灵活性支持 JavaScript 动态语法,但结构较为固定更灵活的配置方式,可以动态加载和组合配置

六、Prettier ​

6.1 .prettierrc.js ​

.prettierrc.js 使用 JavaScript 语法配置 Prettier，因此可以在配置中使用条件逻辑、变量等动态内容。它的优势在于灵活性更高，适合需要动态配置的场景。

代码示例
js
// @see: https://www.prettier.cn

module.exports = {
  // 指定最大换行长度
  printWidth: 130,
  // 缩进制表符宽度 | 空格数
  tabWidth: 2,
  // 使用制表符而不是空格缩进行 (true：制表符，false：空格)
  useTabs: false,
  // 结尾不用分号 (true：有，false：没有)
  semi: false,
  // 使用单引号 (true：单引号，false：双引号)
  singleQuote: true,
  // 在对象字面量中决定是否将属性名用引号括起来 可选值 "<as-needed|consistent|preserve>"
  quoteProps: 'as-needed',
  // 在JSX中使用单引号而不是双引号 (true：单引号，false：双引号)
  jsxSingleQuote: false,
  // 多行时尽可能打印尾随逗号 可选值"<none|es5|all>"
  trailingComma: 'none',
  // 在对象，数组括号与文字之间加空格 "{ foo: bar }" (true：有，false：没有)
  bracketSpacing: true,
  // 将 > 多行元素放在最后一行的末尾，而不是单独放在下一行 (true：放末尾，false：单独一行)
  bracketSameLine: false,
  // (x) => {} 箭头函数参数只有一个时是否要有小括号 (avoid：省略括号，always：不省略括号)
  arrowParens: 'avoid',
  // 指定要使用的解析器，不需要写文件开头的 @prettier
  requirePragma: false,
  // 可以在文件顶部插入一个特殊标记，指定该文件已使用 Prettier 格式化
  insertPragma: false,
  // 用于控制文本是否应该被换行以及如何进行换行
  proseWrap: 'preserve',
  // 在html中空格是否是敏感的 "css" - 遵守 CSS 显示属性的默认值， "strict" - 空格被认为是敏感的 ，"ignore" - 空格被认为是不敏感的
  htmlWhitespaceSensitivity: 'css',
  // 控制在 Vue 单文件组件中 <script> 和 <style> 标签内的代码缩进方式
  vueIndentScriptAndStyle: false,
  // 换行符使用 lf 结尾是 可选值 "<auto|lf|crlf|cr>"
  endOfLine: 'auto',
  // 这两个选项可用于格式化以给定字符偏移量（分别包括和不包括）开始和结束的代码 (rangeStart：开始，rangeEnd：结束)
  rangeStart: 0,
  rangeEnd: Infinity,
  plugins: ['prettier-plugin-tailwindcss'],
}

6.2 与 ESLint 的冲突 ​

ESLint 是一个用于检查和强制执行代码风格和错误的工具，而 Prettier 是一个代码格式化工具，自动格式化代码。两者之间有时会在代码风格规则上发生冲突，特别是当 ESLint 配置了和 Prettier 不同的代码风格规则时。

为了解决这个问题，可以采用以下策略：

  1. 安装 eslint-config-prettier

eslint-config-prettier 是一个专门为解决 ESLint 和 Prettier 冲突的配置。它通过禁用所有与 Prettier 冲突的 ESLint 规则，确保 Prettier 接管格式化工作。

js
npm install --save-dev eslint-config-prettier

// .eslintrc.js
module.exports = {
  extends: [
    'eslint:recommended',
    'plugin:vue/vue3-recommended',
    'plugin:@typescript-eslint/recommended',
    'prettier', // 确保放在最后，用于禁用与 Prettier 冲突的规则
  ],
  rules: {
    // 自定义规则可以在这里添加
  },
};

  1. 使用 eslint-plugin-prettier
    eslint-plugin-prettier 可以将 Prettier 的格式化规则直接作为 ESLint 规则运行。这样，ESLint 不仅负责代码风格检查，还会基于 Prettier 的规则检查代码格式，统一检查和格式化行为。

    js
    npm install --save-dev eslint-plugin-prettier

// .eslintrc.js
module.exports = {
  extends: [
    'eslint:recommended',
    'plugin:vue/vue3-recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:prettier/recommended', // Prettier 集成
  ],
  rules: {
    'prettier/prettier': 'error', // 确保 Prettier 的格式化错误会被 ESLint 捕获
  },
};

七、Stylelint ​

Stylelint 是一个强大的 CSS、Sass、Less 等样式语言的代码质量检查工具。它通过静态代码分析的方式来确保样式符合团队的代码风格规范，帮助开发者发现并修复样式中的错误或不规范的写法。

.stylelintrc 文件用于定义 Stylelint 的配置选项，包括规则集、插件、忽略规则等。这个文件可以有多种格式，包括 JSON、YAML、JS 文件等，常见的文件名是 .stylelintrc，或者 .stylelintrc.json、.stylelintrc.yml、stylelint.config.js。

7.1 .stylelintrc.js ​

代码示例
js
// @see: https://stylelint.io

module.exports = {
  root: true,
  // 继承某些已有的规则
  extends: [
    'stylelint-config-standard', // 配置 stylelint 拓展插件
    'stylelint-config-html/vue', // 配置 vue 中 template 样式格式化
    'stylelint-config-standard-scss', // 配置 stylelint scss 插件
    'stylelint-config-recommended-vue/scss', // 配置 vue 中 scss 样式格式化
    'stylelint-config-recess-order', // 配置 stylelint css 属性书写顺序插件,
  ],
  overrides: [
    // 扫描 .vue/html 文件中的 <style> 标签内的样式
    {
      files: ['**/*.{vue,html}'],
      customSyntax: 'postcss-html',
    },
  ],
  rules: {
    'function-url-quotes': 'always', // URL 的引号 "always(必须加上引号)"|"never(没有引号)"
    'color-hex-length': 'long', // 指定 16 进制颜色的简写或扩写 "short(16进制简写)"|"long(16进制扩写)"
    'rule-empty-line-before': 'never', // 要求或禁止在规则之前的空行 "always(规则之前必须始终有一个空行)"|"never(规则前绝不能有空行)"|"always-multi-line(多行规则之前必须始终有一个空行)"|"never-multi-line(多行规则之前绝不能有空行)"
    'font-family-no-missing-generic-family-keyword': null, // 禁止在字体族名称列表中缺少通用字体族关键字
    'scss/at-import-partial-extension': null, // 解决不能使用 @import 引入 scss 文件
    'property-no-unknown': null, // 禁止未知的属性
    'no-empty-source': null, // 禁止空源码
    'selector-class-pattern': null, // 强制选择器类名的格式
    'value-no-vendor-prefix': null, // 关闭 vendor-prefix (为了解决多行省略 -webkit-box)
    'no-descending-specificity': null, // 不允许较低特异性的选择器出现在覆盖较高特异性的选择器
    'value-keyword-case': null, // 解决在 scss 中使用 v-bind 大写单词报错
    'media-query-no-invalid': null, // 媒体查询中不允许无效的媒体功能名称
    'selector-pseudo-class-no-unknown': [
      true,
      {
        ignorePseudoClasses: ['global', 'v-deep', 'deep'],
      },
    ],
  },
  ignoreFiles: ['**/*.js', '**/*.jsx', '**/*.tsx', '**/*.ts'],
}

7.2 Stylelint 与 Prettier 的冲突 ​

Stylelint 和 Prettier 在某些方面可能存在冲突（如格式化风格），通常可以通过引入 stylelint-config-prettier 来禁用那些和 Prettier 格式化风格相冲突的规则。

八、TSConfig ​

8.1 tsconfig.node.json 和 tsconfig.app.json ​

npm init vue@latest 命令会创建一个基于 Vue.js 的 TypeScript 项目模板，其中包含了三个 TypeScript 配置文件：tsconfig.json、tsconfig.node.json 和 tsconfig.app.json。

其中，tsconfig.json 是项目的主要 TypeScript 配置文件，它引用了其他两个配置文件：

json
{
  "extends": "./tsconfig.app.json",
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "tests/**/*.ts", "tests/**/*.tsx"]
}

tsconfig.node.json 和 tsconfig.app.json 是用于不同构建目标的 TypeScript 配置文件。tsconfig.node.json 用于 Node.js（如 Vite 本身），而 tsconfig.app.json 用于应用程序，可能包含 Angular 特有的选项（如 resolveJsonModule）。

如果项目不使用 Angular，可以删除 tsconfig.app.json 或移除其中的 Angular 相关选项，这对 Vue.js 项目无影响。这些配置文件主要用于在 Vue.js 项目中启用 TypeScript 支持，若不使用 TypeScript，可删除它们。

8.2 tsconfig.app.json ​

代码示例
json
{
  "compilerOptions": {
    "allowJs": true,
    "target": "ESNext",
    "useDefineForClassFields": true,
    "allowImportingTsExtensions": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "types": ["vite/client"],

    /* Strict Type-Checking Options */
    "strict": true /* Enable all strict type-checking options. */,
    // "noImplicitAny": true,                 /* Raise error on expressions and declarations with an implied 'any' type. */
    // "strictNullChecks": true,              /* Enable strict null checks. */
    // "strictFunctionTypes": true,           /* Enable strict checking of function types. */
    // "strictBindCallApply": true,           /* Enable strict 'bind', 'call', and 'apply' methods on functions. */
    // "strictPropertyInitialization": true,  /* Enable strict checking of property initialization in classes. */
    // "noImplicitThis": true,                /* Raise error on 'this' expressions with an implied 'any' type. */
    // "alwaysStrict": true,                  /* Parse in strict mode and emit "use strict" for each source file. */

    "jsx": "preserve",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "lib": ["ESNext", "DOM"],
    "skipLibCheck": true,
    "noEmit": true,
    "baseUrl": "./",
    "paths": {
      "@": ["src"],
      "@/*": ["./src/*"]
    }
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "build/**/*.ts",
    "build/**/*.d.ts",
    "vite.config.ts",
    "vite/client",
    "vite-plugin-svg-icons/client",
    "node"
  ],
  "exclude": ["node_modules", "dist", "**/*.js"]
}

8.3 tsconfig.node.json ​

代码示例
json
{
  "compilerOptions": {
    "module": "CommonJS", // Node.js 默认使用的模块系统
    "target": "ES2020", // ECMAScript 目标版本
    "outDir": "./dist", // 输出目录
    "moduleResolution": "node", // 指定模块解析策略为 node 风格
    "lib": ["ES2020"], // 使用的库，包含 ECMAScript 2020 特性
    "esModuleInterop": true, // 允许与 CommonJS 模块进行互操作
    "skipLibCheck": true, // 跳过库的类型检查以提高性能
    "forceConsistentCasingInFileNames": true // 确保文件名区分大小写
  },
  "include": ["server/**/*.ts"], // 包含 Node.js 代码所在的目录
  "exclude": ["node_modules"] // 排除不需要编译的目录
}

不要温和的走进那个良夜

Copyright © 2025-present whisper

不要温和的走进那个良夜

Copyright © 2025-present whisper