埃斯林特-插头-菲克马-插头

此寄存器定义 类型标记- slint 规则 图像插件开发。 。 。 .

此工具有助于您及时掌握 Figma 插件 API 中的最佳做法并进行贬值 。 您可以用它来帮助识别并在许多情况下自动修复插件代码中的出问题. 与任何ESLint插件一样,它与VSCode等IDE集成,提供内置警告和快取功能.

仔细看看

安装

依赖关系

这个linter需要TypeScript,ESLint,打字符-eslint,以及Figma插件API类型定义. 要安装所有这些, 请运行 :

npm install -D typescript eslint @figma/plugin-typings

对于带有遗产配置的ESLint 8:

npm install -D eslint@8 @typescript-eslint/parser@8 @typescript-eslint/eslint-plugin@8

对于 ESLint 9 有平面配置 :

npm install -D eslint@9 @typescript-eslint/parser@8 @typescript-eslint/eslint-plugin@8  typescript-eslint@8

默认的 Figma 插件模板使用这些依赖的旧版本, 因此可能需要编辑 package.json 手动获取更多最新版本. 我们专门测试了以下对等依赖的平面配置:

- `@typescript-eslint/eslint-plugin`: `8.48.1`
- `@typescript-eslint/parser`: `^8.48.1`
- `eslint`: `^9.39.1`
- `typescript-eslint`: `^8.48.1`

安装 ESLint 插件包

npm install -D @figma/eslint-plugin-figma-plugins

配置丝绸

基于您的 ESLint 版本选择配置方法 :

ESLint 9+ (Flat Config) (中文(简体) )

更新您的 ESLint 配置, 以创建一个 eslint- plugin- figma- plugins eslint.config.mjs 使用新文档 defineConfig() 函数(文档在此: https://typescript-eslint.io/getting-started/#details 页面存档备份,存于互联网档案馆(中文(简体) )

这里有个例子 eslint.config.mjs 能够实现 recommended 用于此插件的规则以及来自 @eslint/js 财务报告和审定财务报表 typescript-eslint 软件包 :

import js from '@eslint/js';
import tseslint from 'typescript-eslint';
import * as figmaPlugin from '@figma/eslint-plugin-figma-plugins';
import { defineConfig } from 'eslint/config'

export default defineConfig(
  js.configs.recommended,
  tseslint.configs.recommended,
  {
    files: ['**/*.ts'],
    languageOptions: {
      parser: tseslint.parser,
      parserOptions: {
        project: './tsconfig.json',
      },
    },
    plugins: {
      '@figma/figma-plugins': figmaPlugin,
    },
    rules: {
      ...figmaPlugin.flatConfigs.recommended.rules,
    },
  }
);

ESLint 8( 列克西配置)

将打字程序配置为普通 这些指示。 。 。 .

接下来更新您的 ESLint 配置 extends 阵列包含 plugin:@figma/figma-plugins/recommended 规则。 我们还建议采用下列规则:

• eslint:recommended, (中文(简体) ),
• plugin:@typescript-eslint/recommended

要使用 TypeScript 代码工作,ESLint 还需要以下解析器设置:

{
  ...
  parser: '@typescript-eslint/parser',
  parserOptions: {
    project: './tsconfig.json',
  },
  ...
}

这里有一个完整的例子 .eslintrc.js数字 :

/* eslint-env node */
module.exports = {
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:@figma/figma-plugins/recommended',
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    project: './tsconfig.json',
  },
  root: true
}

重新启动 ESLint 服务器

如果你已经跑 npm install 并更新到此软件包的更新版本, 请记住重新启动您的 IDE 。 在VSCode中,您可以通过打开命令调色板并选择"重新启动ESLint Server"来独立重启ESLint服务器.

使用量

固定和自动固定

通过运行,您可以使用这些规则插入您的项目

npx eslint ./path/to/source

一些规则提供了自动修正,您可以使用 --fix。 。 。 .

npx eslint --fix ./path/to/source

自动修补也通过一些IDE提供.

虚拟系统

要使用 VSCode 的 ESLint,请参见 ESLint VSCode 扩展。此扩展将显示规则的内在违反,并为直接运行IDE中的自定义提供机会.

可用的配置

此插件提供了两种配置 :

• recommended: 包括所有规则 -- -- 断开更改时出错,以及警告咨询
• recommended-problems-only: 仅包含断开更改、省略警告的错误级别规则

对于平面配置, 使用 :

• figmaPlugin.flatConfigs.recommended
• figmaPlugin.flatConfigs['recommended-problems-only']

对于遗产配置, 使用 :

• plugin:@figma/figma-plugins/recommended
• plugin:@figma/figma-plugins/recommended-problems-only

规则

QQ 配置启用 .
QQ 配置设置为警告 .
设置在 recommended 配置 .
设置在 recommended-problems-only 配置 .
自动修复 --fix CLI 选项。 。 。 .

捐款

请看 捐款额