2023年8月

@property 是一个在 CSS 中用于定义自定义属性（Custom Properties，也称为 CSS 变量）的规则。自定义属性允许你在 CSS 中定义一些值，并在其他地方引用这些值，以便在样式中重复使用。

以下是 @property 的基本用法：

/* 定义自定义属性 */
@property --main-color {
  syntax: '<color>';
  initial-value: black;
}

/* 使用自定义属性 */
.element {
  color: var(--main-color);
}

在这个例子中，@property 定义了一个名为 --main-color 的自定义属性，它的初始值为黑色。然后，通过使用 var(--main-color)，你可以在其他样式中引用这个自定义属性，实现了在多个地方使用相同颜色的效果。

需要注意的是，@property 还需要浏览器的支持。虽然现代浏览器（如 Chrome、Firefox、Edge 等）支持自定义属性，但某些老旧的浏览器可能不支持。如果你需要广泛的浏览器兼容性，最好在使用自定义属性之前进行一些测试和检查。

此外，自定义属性的语法和用法还有更多高级特性，如支持不同类型的值、动态更新等。你可以在 CSS 规范中查找更多关于 @property 的信息和用法。

lint 和 lint-staged 都是在项目中使用 ESLint 进行代码检查的工具，但它们的作用和用法略有不同。

  1. lint：
    lint 是一个命令行工具，用于运行代码检查工具（如 ESLint、Stylelint 等）来分析和检查代码的质量。通过运行 lint 命令，你可以对整个项目进行代码检查，查找潜在的问题，并输出相应的错误、警告信息。在 package.json 中，通常你会定义一个 lint 命令，例如：
"scripts": {
  "lint": "eslint src"
}

在终端运行 npm run lint 就会执行代码检查工具对 src 目录中的代码进行检查。

  1. lint-staged：
    lint-staged 是一个工具，用于在提交代码到版本控制系统（如 Git）之前，对暂存区中的代码进行检查。这样可以确保提交的代码符合代码质量规范。lint-staged 配合 husky（一个 Git 钩子工具）可以在提交之前自动运行代码检查。

你可以在 package.json 中配置 lint-staged，例如：

"lint-staged": {
  "src/**/*.{js,vue}": [
    "eslint --fix",
    "git add"
  ]
}

这会对暂存区中的所有 .js 和 .vue 文件运行 eslint --fix 命令来进行代码格式修复，然后将修复后的代码重新添加到暂存区。

总之，lint 用于整体的代码检查和分析，lint-staged 用于在提交代码之前对暂存区的代码进行检查和修复，从而确保提交的代码质量。两者可以结合使用，以便在开发过程中始终保持一致的代码质量。

在 ESLint 中配置全局变量可以通过 .eslintrc.js 配置文件的 globals 属性来实现。这样，ESLint 就会知道这些变量是全局可用的，不会因为未定义而产生错误或警告。

以下是一个示例，演示如何在 ESLint 中配置全局变量：

module.exports = {
  // ...其他配置
  globals: {
    // 在这里添加你需要的全局变量
    myGlobalVariable: 'readonly', // 或 'writable'，或 'off'
    anotherGlobal: 'writable'
  }
};

在上述示例中，globals 属性是一个对象，你可以在这里添加你需要的全局变量，每个变量都有一个值，表示其可写性。可写性有三种选项：

  • 'readonly'：表示变量是只读的。
  • 'writable'：表示变量是可写的。
  • 'off'：表示禁用对该全局变量的检查。

当你在代码中使用这些全局变量时，ESLint 将根据你的配置进行相应的检查。需要注意的是，过多的全局变量可能会影响代码的可维护性，因此最好只在必要的情况下使用全局变量。

如果你在浏览器环境中使用全局变量（如 window 或 document），可能需要将环境配置设置为 'browser'，以便 ESLint 知道这些全局变量是存在的。你可以通过在配置文件中添加 "env": { "browser": true } 来实现这个目标。

module.exports = {
  // ...其他配置
  env: {
    browser: true
  },
  globals: {
    // ...全局变量配置
  }
};

最后，记得在配置全局变量时，权衡好是否真的需要全局变量，并且根据需要设置相应的可写性。

@ 别名在 JavaScript 开发中通常用于简化文件路径的引用，特别是在大型项目中，它可以提高代码的可读性和维护性。在不同的上下文中，@ 别名可能有不同的作用。

  1. @ 别名在 jsconfig.json 或 tsconfig.json 中：
    在一些项目中，你可能会使用 jsconfig.json（或 tsconfig.json，如果你使用 TypeScript）来配置 JavaScript（或 TypeScript）的项目设置。通过配置 baseUrl 和 paths，你可以为文件路径创建别名，其中 @ 别名是一个常见的用法。这里主要是能在编辑器中输入@符号时候自动提示例如：
{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "@/*": ["*"]
    }
  }
}

这样配置后，在你的项目中，以 @ 开头的路径可以映射到 ./src 目录下。例如，如果你有一个文件位于 ./src/components/Button.js，你可以这样引用它：import Button from '@/components/Button'。

  1. 脚手架中的 @ 别名：
    在一些前端脚手架（比如 Vue CLI 或 Create React App）中，@ 别名也被用来指向项目的根目录。这样可以避免深层嵌套的相对路径，提高代码的可读性。例如，在 Vue CLI 项目中，@ 别名默认指向 src 目录，你可以这样引用文件：
import Component from '@/components/Component.vue';

总的来说，@ 别名的作用是通过为文件路径创建简洁的别名，提高代码的可读性，减少相对路径的使用，并且在一些构建工具和脚手架中，可以减少配置。在不同的项目和工具中，具体的配置和效果可能会有所不同，但主要目标都是为了提升开发体验。

  1. 1
  2. 2