Skip to main content

10-8

1 Prettier和Eslint的关系​

Prettier是一个代码格式化工具，Eslint是一种规范和工具，而vscode的eslint和prettier插件则是用于支持，和在保存中自动进行格式化代码

有一些插件（代码方面）：​

  • prettier：prettier的核心
  • eslint-config-prettier：解决ESLint中的样式规范和prettier中样式规范的冲突，以prettier的样式规范为准，使ESLint中的样式规范自动失效
  • eslint-plugin-prettier：将prettier作为ESLint规范来使用

另外一些插件（vscode方面）：​

  • ESLint，下面是vscode的配置

    //.setting.json
    {
      "eslint.enable": true,  //是否开启vscode的eslint
      "eslint.autoFixOnSave": true, //是否在保存的时候自动fix eslint
      "eslint.options": {    //指定vscode的eslint所处理的文件的后缀
        "extensions": [
          ".js",
          ".vue",
          ".ts",
          ".tsx"
        ]
      },
      "eslint.validate": [     //确定校验准则
        "javascript",
        "javascriptreact",
        {
          "language": "html",
          "autoFix": true
        },
        {
          "language": "vue",
          "autoFix": true
        },
        {
          "language": "typescript",
          "autoFix": true
        },
        {
          "language": "typescriptreact",
          "autoFix": true
        }
      ]
    }

    配置中，主要注意的有两点：

    • eslint.options中可以通过configFile属性来执行eslint规范的绝对路径，默认会向上查找，在根路径中指定。
    • eslint.validate中必须通过{ language: XXX}的形式来指定typescript和typescriptreact

实例：React+ts项目中配置eslint​

//.eslintrc.json
{
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": 2020,
    "sourceType": "module",
    "ecmaFeatures": {
      // Allows for the parsing of JSX
      "jsx": true
    }
  },
  "ignorePatterns": ["node_modules/**/*", "src/plugins/@uniswap/**/*"],
  "settings": {
    "react": {
      "version": "detect"
    }
  },
  "extends": [
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:react-hooks/recommended",
    "prettier/@typescript-eslint",
    "plugin:prettier/recommended"
  ],
  "rules": {
    "@typescript-eslint/explicit-function-return-type": "off",
    "prettier/prettier": "error",
    "@typescript-eslint/no-explicit-any": "off",
    "@typescript-eslint/ban-ts-comment": "off",
    "@typescript-eslint/ban-ts-ignore": "off",
    "@typescript-eslint/explicit-module-boundary-types": "off"
  }
}
//.prettierrc
{
  "semi": false,
  "singleQuote": true,
  "printWidth": 120
}

附：tsconfig.json配置

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "strict": true,
    "alwaysStrict": true,
    "strictNullChecks": true,
    "noUnusedLocals": false,
    "noFallthroughCasesInSwitch": true,
    "noImplicitAny": true,
    "noImplicitThis": true,
    "noImplicitReturns": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "react-jsx",
    "downlevelIteration": true,
    "allowSyntheticDefaultImports": true,
    "types": ["react-spring", "jest"],
    "baseUrl": "src"
  },
  "exclude": ["node_modules", "cypress"],
  "include": ["./src/**/*.ts", "./src/**/*.tsx", "src/components/Confetti/index.js"]
}

参考

[1] 在Typescript项目中，如何优雅的使用ESLint和Prettier.https://segmentfault.com/a/1190000019661168

[2] uniswap前端项目.https://github.com/Uniswap/interface

2 Eslint和Tslint的关系​

共同点：​

Eslint 可以静态检查 javascript 代码一些逻辑上的错误，还有一些代码格式的错误。原理是把代码 parse 成 AST，然后基于 AST 来检查一些问题。

Tslint 可以静态检查 typescript 代码的一些逻辑上的错误，一些代码格式的错误。原理也是基于 AST 的。

不同点：​

Eslint包含Tslint，对于Typescript项目的编码规范而言，主要有两种选择ESLint和TSLint。ESLint不仅能规范js代码，通过配置解析器，也能规范TS代码。此外由于性能问题，TypeScript 官方决定全面采用ESLint，甚至把仓库作为测试平台，而 ESLint 的 TypeScript 解析器也成为独立项目，专注解决双方兼容性问题。

[1] 在Typescript项目中，如何优雅的使用ESLint和Prettier.https://segmentfault.com/a/1190000019661168

[2] TSLint 和 ESLint 是怎么融合在一起的.https://cloud.tencent.com/developer/article/1883568

联想：有哪些AST，它们之间有什么区别呢？​

eslint 有自己的 espree 的 parser 和相应的 AST。

typescript 也有自己的 parser 和相应的 AST。

babel 也有自己的 parser 和相应的 AST。

为什么会出现这么多parser？​

因为它们有自己的语法，需要自己去解析

总结​

js 有不同的 parser，分为 estree 系列和非 estree 系列：

  • estree 系列有 esprima、acorn 以及扩展自 acorn 的 espree、babel parser 等。
  • 非 estree 系列有 typescript、terser 等。

eslint 中支持了 parser 的切换，可以在 babel parser、vue template parser、typescript 和 espree 中切换，当然也可以扩展其他的 parser。

[1] TSLint 和 ESLint 是怎么融合在一起的.https://cloud.tencent.com/developer/article/1883568

3 nest-新手​

一些文档：​

nest中文文档仓库：https://github.com/nestcn/docs.nestjs.cn

nest中文文档：https://docs.nestjs.cn/8/introduction

nest英文文档：https://nextjs.org

nest+next前后台博客项目：https://github.com/fantasticit/wipi

问题1：一名node后端开发者需要掌握哪些内容？哪些板块？​

TODO

Nestjs​

dto与interface的关系？​

dto：dataTransferObject（数据传输对象）是一个js对象，在TS转化后会保留

Interface：是一个接口，TS转化后会被删除

异常过滤器​

作用：捕获异常，给客户端做出相应

思路：定义异常过滤器，设置好需要捕获的异常类型（如果不设置，则为空），最后再注册

可以注册到方法，控制器或全局

⚠️ 主要逻辑为实现 ExceptionFilter 接口，再重写 catch 方法

//定义
import { ExceptionFilter, Catch, ArgumentsHost, HttpException } from '@nestjs/common';
import { Request, Response } from 'express';

@Catch(HttpException)
export class HttpExceptionFilter implements ExceptionFilter {
  catch(exception: HttpException, host: ArgumentsHost) {
    const ctx = host.switchToHttp();
    const response = ctx.getResponse<Response>();
    const request = ctx.getRequest<Request>();
    const status = exception.getStatus();

    response
      .status(status)
      .json({
        statusCode: status,
        timestamp: new Date().toISOString(),
        path: request.url,
      });
  }
}
//注册到方法
@Post()
@UseFilters(HttpExceptionFilter) //这里最好用类，而非实例
async create(@Body() createCatDto: CreateCatDto) {
  throw new ForbiddenException();
}

//注册到控制器
@UseFilters(new HttpExceptionFilter())
export class CatsController {}

//注册到全局
async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  app.useGlobalFilters(new HttpExceptionFilter());
  
  await app.listen(3000);
}

管道​

说明：管道与异常过滤器类似，也是在客户端与路由处理之间的一层处理，它可以进行数据的 验证 和 转化

验证​

主要验证什么呢？验证参数是否合法

例如自带的ValidationPipe，使用实例如下（注意安装class-validator和class-transformer包）：

class CreateCatDto {
  //name属性必须为string，如果不合法，那么返回403
  @IsString()
  name: string;
}

@Controller('cats')
export class CatsController {
  // 注入服务
  constructor(private catsService: CatsService) {}

  @Post()
  @UsePipes(ValidationPipe) //使用管道验证客户端传入数据是否合法
  async create(@Body() createCatDto: CreateCatDto) {
    this.catsService.create(createCatDto);

    return '创建成功';
  }
}

转化​

将数据转化，例如自带的ParseIntPipe（将参数转化为int）

@Get(':id')
async findOne(@Param('id', new ParseIntPipe()) id) {
  return await this.catsService.findOne(id);
}

问题一：如何自定义转化函数呢？

守卫​

问：守卫、中间件、异常过滤器、管道、拦截器的通过顺序是怎样的？

image-20211115124218376

守卫可以进行鉴权

[1] Nest中的中间件、守卫、管道、异常过滤器和拦截器.https://juejin.cn/post/7002229947414609933

[2] Nest学习导图.https://blog.csdn.net/weixin_44828005/article/details/115499297

4 mac如何生成安卓证书（.keystore）?​

请google

别名：test.keystore

密码：j...3

5 ssh_exchange_identification: Connection closed by remote host-ssh无法连接​

原因：公司今天梯子突然用不了了，之后自己挂梯子能上github网站，但无法拉/推代码 怀疑是代理提前错误解析了github的地址

解决方案：替换hosts，让本机知道github.com的真实地址

第一步：查看github的IP​

https://websites.ipaddress.com/github.com
=>
  我这里查到的是140.82.112.4

第二步：修改hosts​

sudo vim /etc/hosts

追加如下内容：

# Github
140.82.112.4 github.com

第三步：验证​

ssh [email protected] -vvv

如果出现 Bytes per second: sent 6328.5, received 6052.3 字样则成功

[1] ssh -T [email protected] 出现 ssh_exchange_identification: Connection closed by remote host 的错误.https://www.v2ex.com/t/290545

[2] github修改IP.https://blog.csdn.net/weixin_34290096/article/details/93088345

⁣https://api.thegraph.com/subgraphs/name/hfersss/sheepdex⁣

https://api.thegraph.com/subgraphs/name/hfersss/sheepdex

相关问题一：fatal: unable to access 'https://github.com/ginlink/lua-learn-for-grow.git/': OpenSSL SSL_read: SSL_ERROR_SYSCALL, errno 10054​

解决方案：采用ssh的方式登陆，不要用https

https://github.com/ginlink/lua-learn-for-grow.git/

改为
[email protected]:ginlink/lua-learn-for-grow.git

6 Fix Windows Update Error 0x800b0109​

[1] Fix Windows Update Error 0x800b0109.https://www.digitbin.com/fix-error-0x800b0109-windows-update/

7 apple M1 打包的镜像在 Linux运行​

加上平台参数即可，例如：

docker build --platform linux/amd64 -t test/demo-docker .

[1] apple M1 打包镜像在 Linux运行.https://blog.csdn.net/weiyi556/article/details/115111917

8 vac_mock_list_data​

{
  "code": 1,
  "data": {
    "list": [
      {
        "id": 1,
        "icon": "/static/img/stuCenter/vacation.svg",
        "title": "请销假",
        "url": "/pages/vacation/vacation"
      },
      {
        "id": 1,
        "icon": "/static/img/stuCenter/write.svg",
        "title": "健康晨报",
        "url": "/pages/vacation/vacation"
      },
      {
        "id": 1,
        "icon": "/static/img/stuCenter/write.svg",
        "title": "健康日报",
        "url": "/pages/vacation/vacation"
      },{
        "id": 1,
        "icon": "/static/img/stuCenter/apply.svg",
        "title": "返校申请",
        "url": "/pages/vacation/vacation"
      },{
        "id": 1,
        "icon": "/static/img/stuCenter/apply.svg",
        "title": "离返校登记",
        "url": "/pages/vacation/vacation"
      },{
        "id": 1,
        "icon": "/static/img/stuCenter/notify.svg",
        "title": "通知公告",
        "url": "/pages/vacation/vacation"
      },{
        "id": 1,
        "icon": "/static/img/stuCenter/apply.svg",
        "title": "课堂缺勤记录",
        "url": "/pages/vacation/vacation"
      },{
        "id": 1,
        "icon": "/static/img/stuCenter/apply.svg",
        "title": "课堂评价",
        "url": "/pages/vacation/vacation"
      },{
        "id": 1,
        "icon": "/static/img/stuCenter/help.svg",
        "title": "使用帮助",
        "url": "/pages/vacation/vacation"
      }
    ]
  }
}

9 seo - 如何强制 Telegram 更新链接预览？​

解决方案：要通过telegram的刷新机器人进行刷新

第一步：给html添加prefix属性​

<html prefix="og: http://ogp.me/ns#">

第二步：给 @webpagebot 发送一个更新消息​

@webpagebot

参考

[1] seo - 如何强制 Telegram 更新链接预览？.https://www.coder.work/article/842107

[2] How to force telegram to update link preview?.https://stackoverflow.com/questions/35268940/how-to-force-telegram-to-update-link-preview

10 移动端禁用缩放-禁止​

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no"/>

[1] 移动端禁止用户缩放页面完整meta写法.https://blog.csdn.net/guochao8/article/details/82931326

11 uniapp创建vue3+ts的项目​

通过 cli 的方式创建

错误：Module '"vue"' has no exported member 'ref'.​

原因：

解决方案：给 tsconfig.json 中加入include属性

"include": [
  "./src/**/*.ts",
],

12 为vuex的modules添加类型​

import { createStore } from 'vuex'
import application from './application'
import user from './user'

// 重点
interface ModuleState {
  application: typeof application.state
  user: typeof user.state
}

const store = createStore<ModuleState>({
  modules: {
    application,
    user,
  },
})
export default store

[1] vuex对ts的支持太弱？想要获得vuex的智能提示？一个让 vuex 更好的支持 typescript 的解决方案.https://segmentfault.com/a/1190000019628996

13 vite postcss​

目的：1.进行移动端适配（vw） 2.进行css转化（兼容性处理）

Vite自身已经集成PostCSS

[1] vite postcss.https://www.jianshu.com/p/21be605c6ad1

14 关于别名@设置​

问：别名设置与什么有关？vue？react？typescript？

TODO

[1] vue 别名路径智能提示配置.https://www.cnblogs.com/boyyangD/articles/15015793.html

15 uniapp进行vue3+ts+vite开发​

❌ 目前（2021-11-15 14:21:41），不建议使用uniapp的vue3版本，因为一些三方包没有升级到vue3

目前有两种方式：

  • 第一，利用hbuilder创建 uni-app 项目；
  • 第二，利用cli创建；

但第二种有缺陷，APP/H5与小程序需要不同的方式创建，所以建议用hbuilder创建。

创建步骤：

第一步：通过hbuilder创建uni-app项目，选择 uni-ui​

创建好的项目，包含基本uniapp项目结构（但是用vite搭建的），现在需要选择vue3版本，然后再配置ts

第二步：选择vue3版本​

manifest.json文件中选择vue3版本

第三步：根据官网升级指南中的 使用 ts 开发 uni-app 配置ts​

  • 将 main.js 修改为 main.ts
  • 同时，index.html 中引用路径 src="/src/main.js" 改为 src="/src/main.ts"
  • 将 vue 文件中 <script> 标签的语言属性设置为 ts, <script lang="ts">
  • 安装 typescript 包
    • HBuilder X 项目运行时会提示安装，按提示操作即可
    • cli 项目需要手动安装，npm i typescript

通过以上配置，此项目已经是vue3+ts+vite的项目，如果我们要在vscode中开发，但vscode报错怎么办？

所有配置的内容只在hbuilder中封装好了，但vscode不知道，所有需要安装一些开发工具让vscode也知道

下面是 package.json

{
  "name": "yue-code",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "devDependencies": {
    "@dcloudio/types": "^2.5.10",
    "@vitejs/plugin-vue": "^1.6.0"
  },
  "dependencies": {
    "vue": "^3.2.20",
    "vuex": "^4.0.2"
  }
}

.sfc.d.ts

declare module "*.vue" {
  import Vue from 'vue'
  export default Vue
}

declare module 'vue' {
  import { CompatVue } from '@vue/runtime-dom'
  const Vue: CompatVue
  export default Vue
  export * from '@vue/runtime-dom'
}

tsconfig.json

{
    "compilerOptions": {
        "target": "esnext",
        "module": "esnext",
        "strict": true,
        "jsx": "preserve",
        "importHelpers": true,
        "moduleResolution": "node",
        "esModuleInterop": true,
        "allowSyntheticDefaultImports": true,
        "experimentalDecorators": true,
        "sourceMap": true,
        "skipLibCheck": true,
        "baseUrl": ".",
        "types": [
            "@dcloudio/types"
            // "miniprogram-api-typings",
            // "mini-types"
        ],
        "paths": {
            "@/*": [
                "./*"
            ]
            // 路劲别名到根
        },
        "lib": [
            "esnext",
            "dom",
            "dom.iterable",
            "scripthost"
        ]
    },
    "exclude": [
        "node_modules",
        "unpackage",
        "src/**/*.nvue"
    ]
}

已知问题​

  • 无法配置vite.config.js(ts)，例如配置别名，配置之后项目进入空白页面，无任何提示

项目地址​

https://gitee.com/nahaohao/uniapp-vue3-ts-vite

参考

[1] uni-app 项目支持 vue 3.0介绍，及升级指南.https://ask.dcloud.net.cn/article/37834

[2] vue3官网.用于迁移的构建版本.https://v3.cn.vuejs.org/guide/migration/migration-build.html#%E6%A6%82%E8%BF%B0

[3] vue3官网.TypeScript 支持.https://v3.cn.vuejs.org/guide/typescript-support.html#npm-%E5%8C%85%E4%B8%AD%E7%9A%84%E5%AE%98%E6%96%B9%E5%A3%B0%E6%98%8E