npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

eslint-config-firesoon

v2.0.0-alpha.1

Published

firesoon front-end code style validation rules

Downloads

19

Readme

火树前端代码风格校验

本规则的制定参考腾讯的 eslint-config-alloy 插件,针对在项目中落地的情况进行适当调整。

目录结构

├── index.js  // JavaScript基本规则
├── react.js  // react 验证规则
├── typescript-react.js // ts-react 验证规则
├── typescript.js // ts 验证规则
└── vue.js // vue 验证规则

如何使用

1.0.1 升级指南

注意:如果是老项目升级要注意将各个包都升级到最新版

  • react ts 项目

    npm install --save-dev eslint @typescript-eslint/parser eslint-config-firesoon eslint-config-alloy eslint-plugin-flowtype eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks @typescript-eslint/eslint-plugin

    注意:@typescript-eslint/eslint-plugin 和 @typescript-eslint/parser 需要升级到 5.0+

    • .eslintrc.js 配置

      module.exports = {
        env: {
          browser: true,
          node: true,
          commonjs: true,
          es6: true,
        },
        root: true,
        plugins: ["react", "react-hooks"],
        extends: ["firesoon/typescript-react"],
        rules: {
          "react-hooks/exhaustive-deps": "warn",
          "react-hooks/rules-of-hooks": "error",
        },
      };
    • tsconfig.json 配置

      {
        "compilerOptions": {
          "target": "esnext",
          "module": "esnext",
          "moduleResolution": "node",
          "importHelpers": true,
          "jsx": "react-jsx",
          "lib": ["esnext", "dom"],
          "esModuleInterop": true,
          "sourceMap": true,
          "baseUrl": ".",
          // "strict": true,
          "paths": {
            "@/*": ["src/*"],
            "@@/*": ["src/.umi/*"]
          },
          // 用来指定允许从没有默认导出的模块中默认导入
          "allowSyntheticDefaultImports": true,
          /* 不允许变量或函数参数具有隐式any类型,例如
             function(name) {
                 return name;
             } */
          "noImplicitAny": false,
          // 用于指定是否启用实验性的装饰器特性
          "experimentalDecorators": true,
          // 用于指定是否为装饰器提供元数据支持,关于元数据,也是ES6的新标准,可以通过Reflect提供的静态方法获取元数据,如果需要使用Reflect的一些方法,需要引用ES2015.Reflect这个库
          "emitDecoratorMetadata": true,
          // 默认false,是否检测定义了但是没使用的变量
          "noUnusedLocals": true,
          // 用于检查是否有在函数体中没有使用的参数
          "noUnusedParameters": true
        }
      }
    • package.json

      "lint-staged": {
        "*.{ts,tsx,js,jsx,css,less}": [
          "prettier --write",
          "git add"
        ]
      },
  • vue 项目

    npm install --save-dev eslint @babel/eslint-parser vue-eslint-parser eslint-config-firesoon eslint-plugin-vue eslint-config-alloy

常见问题

vscode 配置

在 VSCode 中,默认 ESLint 并不能识别 .vue.ts.tsx 文件,需要在「文件 => 首选项 => 设置」里做如下配置:

{
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "html",
    "vue",
    "typescript",
    "typescriptreact"
  ]
}

保存时自动修复 ESLint 错误

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "html",
    "vue",
    "typescript",
    "typescriptreact"
  ]
}

如何结合 Prettier 使用

保存时会自动修复样式问题,在 vscode 中配置 settings.json 文件:

vscode 配置参考:

// setting.json
"eslint.alwaysShowStatus": true,
"eslint.quiet": true,
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true,
  "source.fixAll.stylelint": true
},
"eslint.validate": [
  "javascript",
  "javascriptreact",
  "vue",
  "typescript",
  "typescriptreact"
],
"stylelint.enable": true,

最佳实践.prettierrc.js 配置:

// .prettierrc.js
module.exports = {
  // 一行最多 120 字符
  printWidth: 120,
  // 使用 2 个空格缩进
  tabWidth: 2,
  // 不使用缩进符,而使用空格
  useTabs: false,
  // 行尾需要有分号
  semi: true,
  // 使用单引号
  singleQuote: true,
  // 对象的 key 仅在必要时用引号
  quoteProps: "as-needed",
  // jsx 不使用单引号,而使用双引号
  jsxSingleQuote: false,
  // 末尾需要有逗号
  trailingComma: "all",
  // 大括号内的首尾需要空格
  bracketSpacing: true,
  // jsx 标签的反尖括号需要换行
  jsxBracketSameLine: false,
  // 箭头函数,只有一个参数的时候,也需要括号
  arrowParens: "always",
  // 每个文件格式化的范围是文件的全部内容
  rangeStart: 0,
  rangeEnd: Infinity,
  // 不需要写文件开头的 @prettier
  requirePragma: false,
  // 不需要自动在文件开头插入 @prettier
  insertPragma: false,
  // 使用默认的折行标准
  proseWrap: "preserve",
  // 根据显示样式决定 html 要不要折行
  htmlWhitespaceSensitivity: "css",
  // vue 文件中的 script 和 style 内不用缩进
  vueIndentScriptAndStyle: false,
  // 换行符使用 lf
  endOfLine: "lf",
  // 格式化嵌入的内容
  embeddedLanguageFormatting: "auto",
};

参考