文档章节

TypeScript + eslint 格式化代码及其它

郁也风
 郁也风
发布于 05/27 12:38
字数 843
阅读 15
收藏 0

缘起

之前使用 tslint 校验代码格式,后来发现 ts 官方已经放弃这个转而使用 eslint,研究了一下把相应配置调整了一下。

目标:

  1. 使用 eslintprettier 格式化 TypeScript 代码
  2. 使用 huskylint-staged 在提交代码到 git 的时候自动格式化代码(按需启用)
  3. 使用 commitlint 校验 git commit message(按需启用)

关于 1 做个简单说明,eslintprettier 配合使用的方式是后者先按其规则格式化代码,然后使用 eslint --fix 再次格式化,从而达到代码兼容二者格式的目的。

依赖

npm i -D eslint prettier
npm i -D eslint-config-prettier eslint-plugin-prettier
npm i -D @typescript-eslint/eslint-plugin @typescript-eslint/parser

npm i -D husky lint-staged
npm i -D @commitlint/cli @commitlint/config-conventional

配置

package.json 同级目录下配置如下文件

eslint

采用 .eslintrc.js(对于这些配置,优先选择 js 格式,不说别的,一个注释就比 json 格式强的多)。

module.exports = {
    root: true,
    parser: '@typescript-eslint/parser',
    extends: [
        'plugin:@typescript-eslint/recommended',
        // Uses eslint-config-prettier to disable ESLint rules from @typescript-eslint/eslint-plugin that would conflict with prettier
        'prettier/@typescript-eslint',
        // Enables eslint-plugin-prettier and eslint-config-prettier. This will display prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array.
		// 此行必须在最后
        'plugin:prettier/recommended',
    ],
    env: {
        es6: true,
        node: true,
    },
    parserOptions: {
        // 支持最新 JavaScript
        ecmaVersion: 2018,
        sourceType: 'module',
    },
    rules: {
        // 如果有不适合的规则,可以在此调整
		// ...
    },
};

当然,上面是单纯的 node 下使用 TypeScript 的配置,如果是 react 之类的,可以再加上相应配置。

prettier

配置文件为:.prettierrc.js

module.exports = {
    // 箭头函数只有一个参数的时候可以忽略括号
    arrowParens: 'avoid',
    // 括号内部不要出现空格
    bracketSpacing: false,
    // 行结束符使用 Unix 格式
    endOfLine: 'lf',
    // true: Put > on the last line instead of at a new line
    jsxBracketSameLine: false,
    // jsx 属性使用双引号
    jsxSingleQuote: false,
    // 行宽
    printWidth: 100,
    // 换行方式
    proseWrap: 'preserve',
    // 分号
    semi: true,
    // 使用单引号
    singleQuote: true,
    // 缩进
    // tabWidth: 4,
    // 使用空格缩进
    useTabs: false,
    // 后置逗号,多行对象、数组在最后一行增加逗号
    trailingComma: 'es5',
    // parser: 'babylon',
};

如果某些代码不需要格式化,可以在 .prettierignore 中配置,格式类似 .gitignore

git 提交时候的代码格式化

.huskyrc.js

module.exports = {
  hooks: {
    // git message 格式控制,参见下面的 git commit message 校验部分,如果不需要可删除
    'commit-msg': 'commitlint -E HUSKY_GIT_PARAMS',

	// commit 之前执行的命令
    'pre-commit': 'lint-staged',
  },
};

lint-staged.config.js

ts、js 之类代码使用 eslint 格式化,md、css 之类则用 prettier。

module.exports = {
    linters: {
        '*.{ts,tsx}': ['eslint --fix', 'git add'],
        '*.{js,jsx}': ['eslint --fix', 'git add'],
        '*.{md,html,json}': ['prettier --write', 'git add'],
        '*.{css,scss,less}': ['prettier --write', 'git add'],
    },
};

git commit message 格式控制

这个用来控制 git 提交信息是否符合规范,我一般使用 ,具体可参见说明

简单来说,git 提交信息需符合如下规则:

type(scope?): subject
body?
footer?

.commitlintrc.js

此文件在 .huskyrc.js 中配置 commit-msg 后启用。

module.exports = {
  extends: ['@commitlint/config-conventional'],
};

快捷方式

为方便检查代码格式是否存在错误,或者直接格式化所有代码,可以在 package.jsonscript 中配置如下命令:

"lint": "eslint 'src/**/*.{js,ts,tsx}'",
"format": "eslint --fix 'src/**/*.{js,ts,tsx}'",

前者用来检查代码是否存在格式问题。

后者用来修正代码格式。

© 著作权归作者所有

郁也风
粉丝 16
博文 30
码字总数 15645
作品 0
长宁
项目经理
私信 提问
TypeScript 官方决定全面采用 ESLint

由于性能问题,TypeScript 官方决定全面采用 ESLint,甚至把仓库(Repository)作为测试平台,而 ESLint 的 TypeScript 解析器也成为独立项目,专注解决双方兼容性问题。 JavaScript 代码检验...

段段段落
01/22
0
5
最全的Eslint配置模板,从此统一团队的编程习惯

随着项目的不断增加,急切需要统一每个项目的代码规范,将一些低级错误在萌芽状态下掐死。所以特此结合当前项目使用的一些规范,再根据社区推荐的规范,整合成这个repo。里面集成了React和N...

小兀666
06/04
0
0
[译] TypeScript 和 Babel:一场美丽的婚姻

原文地址:TypeScript With Babel: A Beautiful Marriage 作者: Matt Turnbull, Feb 12,2019 感谢 Babel 的 TypeScript 插件(),TypeScript 从未变得如此简单,这是 TypeScript 和 Babel ......

司南free
03/08
0
0
visual studio code vue文件格式化插件

visual studio code安装插件eslint和vetur visual studio code文件setting.json文件配置 { "eslint.autoFixOnSave":true, "vetur.format.defaultFormatter.js":"vscode-typescript", "eslint......

刘俊杰liujj
03/28
0
0
vue中eslintrc.js配置最详细介绍

本文是对vue项目中自带文件eslintrc.js的内容解析,介绍了各个eslint配置项的作用,以及为什么这样设置。比较详细,看完能对eslint有较为全面的了解,基本解除对该文件的疑惑。...

peakedness丶
01/14
0
0

没有更多内容

加载失败,请刷新页面

加载更多

代码规范

代码格式化 安装vscode插件:Prettier - Code formatter 格式化配置:将下列配置写入到vscode的settings.json文件 (遵照代码格式化) "prettier.disableLanguages": ["vue"], "prettier.......

TreeZhou0511
48分钟前
3
0
python实现人工神经网络的一个例子

人工神经网络已经有无数的开源框架,比如tensorflow,caffe等,可以直接用。但最近需要做一个小样例,把基本思想讲一讲,因此自己写了一个demo,以供参考。 下面直接上代码,代码中有注释,比...

propagator
51分钟前
3
0
远程dubugger

1、在tomcat的bin下/data/project/XXX/apache-tomcat-8.5.23/bin 在catalina.bat文件中新增如下即可 JAVA_OPTS="-Xmx1024m -Xms1024m -agentlib:jdwp=transport=dt_socket,server=y,suspend......

一只小青蛙
今天
1
0
jemter 连接MySQL

jemter 连接MySQL 点击测试计划,测试计划最后”添加目录或jar包到ClassPath“,点击浏览,添加mysql-connector.jar mysql-connector.jar的下载地址: https://mvnrepository.com/artifact/my...

xiaobai1315
今天
5
0
第一次尝试用python实现zabbix主机的批量添加批量删除及模板导入脚本

Python3入门练手尝试篇 API参考: zabbix API 4.0版本:https://www.zabbix.com/documentation/4.0/zh/manual/api #!/bin/python3import xlrd,os,json,requests,sys#参考zabbix API 4.0版本......

平头哥-Enjoystudy
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部