在Typescript项目中,使用ESLint和Prettier,以及解决保存代码后ESLint配置冲突问题
首先,检查项目中根目录.eslintrc.js文件,该文件中定义了ESLint的基础配置,找到其中的rules
例如:
const prettierConfig = require('./.prettierrc.js')
module.exports = {
root: true,
parserOptions: { ecmaVersion: 2021 },
overrides: [
rules: {
'prettier/prettier': ['error', prettierConfig],
'jsdoc/newline-after-description': 1,
'@typescript-eslint/no-this-alias': 'error',
'@typescript-eslint/member-ordering': 'off',
'no-irregular-whitespace': 'error',
'no-multiple-empty-lines': 'error',
'no-sparse-arrays': 'error',
'prefer-object-spread': 'error',
'prefer-template': 'error',
'prefer-const': 'off',
'max-len': 'off',
},
],
}
由此可以看到,配置项在./.prettierrc.js,开始执行你的配置吧~~~~
找到./.prettierrc.js
请注意下面代码,是解决代码冲突的重要场景
module.exports = {
singleQuote: true,
useTabs: false,
printWidth: 50,
tabWidth: 2,
semi: false,
htmlWhitespaceSensitivity: 'strict',
arrowParens: 'avoid',
bracketSpacing: true,
wrapAttributes: true,
sortAttributes: true,
proseWrap: 'preserve',
trailingComma: 'none',
endOfLine: 'lf'
};
然后检查你的项目中是否有这个文件,
请注意下面代码中的注释部分,是解决代码冲突的重要场景
.vscode\settings.json
{
"typescript.tsdk": "./node_modules/typescript/lib",
"editor.formatOnSave": false, // 重点关注这个,这个会影响到你的保存代码是否自动修改代码哦~~
"editor.codeActionsOnSave": {
// For ESLint
"source.fixAll.eslint": false, // 重点关注这个,这个会影响到你的保存代码是否自动修改代码哦~~
// For Stylelint
"source.fixAll.stylelint": false // 重点关注这个,这个会影响到你的保存代码是否自动修改代码哦~~
},
"[markdown]": {
"editor.formatOnSave": false
},
"[javascript]": {
"editor.formatOnSave": false
},
"[json]": {
"editor.formatOnSave": false
},
"[jsonc]": {
"editor.formatOnSave": false
},
"files.watcherExclude": {
"**/.git/*/**": true,
"**/node_modules/*/**": true,
"**/dist/*/**": true,
"**/coverage/*/**": true
},
"files.associations": {
"*.json": "jsonc",
".prettierrc": "jsonc",
".stylelintrc": "jsonc"
},
// Angular schematics 插件: https://marketplace.visualstudio.com/items?itemName=cyrilletuzi.angular-schematics
"ngschematics.schematics": [
"ng-alain"
]
}
另外,你的VS code 编辑器,也有一个 settings.json文件,在 File - Preferences - Settings 中可以找到这个文件,里边的有些配置项,也会和项目中的配置造成冲突,请保证和代码配置修改为一致
例如,下面的配置就比较乱,需要改为和项目配置一样的~~
{
"editor.minimap.enabled": false,
"[html]": {
"editor.defaultFormatter": "vscode.html-language-features"
},
"window.zoomLevel": 1,
"[json]": {
"editor.defaultFormatter": "vscode.json-language-features"
},
"[jsonc]": {
"editor.defaultFormatter": "vscode.json-language-features"
},
"files.autoSave": "off",
// 老版本的eslint
// "editor.codeActionsOnSave": {
// "source.fixAll.eslint": false
// },
// "eslint.validate": [
// "javascript",
// "javascriptreact",
// "vue-html",
// "html",
// {
// "language": "vue",
// "autoFix": false
// },
// {
// "language": "typescript",
// "autoFix": false
// },
// {
// "language": "typescriptreact",
// "autoFix": false
// }
// ],
"eslint.run": "onSave",
// "eslint.autoFixOnSave": false,
"files.associations": {
"/path to file/*.extension": "language"
},
// tab 大小为2个空格
"editor.tabSize": 2,
// 100 列后换行
"editor.wordWrapColumn": 100,
// 开启 vscode 文件路径导航
"breadcrumbs.enabled": true,
// prettier 设置语句末尾不加分号
"prettier.semi": false,
// prettier 设置强制单引号
"prettier.singleQuote": true,
// 选择 vue 文件中 template 的格式化工具
"vetur.format.defaultFormatter.html": "prettyhtml",
// 显示 markdown 中英文切换时产生的特殊字符
"editor.renderControlCharacters": true,
// eslint 检测文件类型
"[vue]": {
"editor.defaultFormatter": "octref.vetur"
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
"editor.defaultFormatter": "vscode.typescript-language-features"
},
"workbench.colorTheme": "Default Light+",
// vetur 的自定义设置
// "vetur.format.defaultFormatterOptions": {
// "prettier": {
// "singleQuote": true,
// "semi": false,
// "tabWidth": 2
// }
// },
"vetur.format.defaultFormatterOptions": {
"prettyhtml": {
// 单行超过100个长度的时候开始换行
"printWidth": 50,
"tabWidth": 2,
"useTabs": false,
"singleQuote": false,
"wrapAttributes": true,
"sortAttributes": true
}
},
// 禁用vetur的JS格式化,交给eslint处理
"vetur.format.defaultFormatter.js": "none",
"window.autoDetectColorScheme": true,
"problems.showCurrentInStatus": true,
"eslint.alwaysShowStatus": true,
"VSCodeCounter.showInStatusBar": true,
"zenMode.hideStatusBar": false,
"http.proxy": "http://ics.foxconn.com/dpbg.pac",
"eslint.codeAction.showDocumentation": {
"enable": true
},
//autoFixedOnSave 设置已废弃,采用如下新的设置
"editor.codeActionsOnSave": {
"source.fixAll.eslint": false
},
"eslint.format.enable": true,
"editor.formatOnSave": false,
//autoFix默认开启,只需输入字符串数组即可
"eslint.validate": [
"javascript",
"vue",
"html",
"javascriptreact",
"vue-html",
"html",
"typescript",
"typescriptreact"
]
}
改完就OK 了
在Typescript项目中,使用ESLint和Prettier,以及解决保存代码后ESLint配置冲突问题的更多相关文章
- 在 Ionic2 TypeScript 项目中导入第三方 JS 库
原文发表于我的技术博客 本文分享了在Ionic2 TypeScript 项目中导入第三方 JS 库的方法,供参考. 原文发表于我的技术博客 1. Typings 的方式 因在 TypeScript 中 ...
- 在TypeScript项目中进行BDD测试
在TypeScript项目中进行BDD测试 什么是BDD? BDD(Behavior-Driven Design)是软件团队的一种工作方式,通过以下方式缩小业务人员和技术人员之间的差距: 鼓励跨角色协 ...
- Vue+Typescript项目中使用echarts
方案一:推荐 在typescript+Vue的项目中引用echarts,为了加强引用,引入echarts和@types/echarts两个包,一个是工程依赖,一个是声明依赖. npm install ...
- typescript项目中import 图片时报错:TS2307: Cannot find module ‘...’
最近在用typescript写项目时,我用import来加载一个图片,webpack编译文件是会报错如下: 报错: 解决: 如果在js中引入本地静态资源图片时使用import img from './ ...
- VS Code 自动修改和保存 代码风格 == eslint+prettier
最近因为用到VS Code,需要统一所有人的代码风格(前端语言js/html/css等,或者后端语言 go/python等也可以这么用). 所以参考了一些网络资料,记录下设置步骤,以便后续查阅. St ...
- 在项目中导入MRC的文件时解决办法
1.由于在项目中要使用到第三方框架和其他的类的时候,而它用的是MRC的时候,其最简便的方法:完成从MRC到ARC的转换. 1.点击工程文件,进入到工程的设置里面. 2.看见Build Phases,就 ...
- myeclipse中项目名有红叉,但项目中文件没有报错的解决办法
导入了别人的项目,各种jar包都放好后,path也都build好了,项目也能正常启动,但是就是项目名有红叉,这是为什么呢? 网上有人说Java build path中的jar包missing了,这是一 ...
- 学习笔记——make项目中克隆GitHub目录失败的解决
在示例项目中执行make后出现下面的错误 WARNING: Missing submodule components/json/cJSON... WARNING: Missing submodule ...
- maven项目中找不到Maven Dependencies解决办法
用eclipse创建maven项目后,在Deployment Assembly中通过Add...->Java Build Path Entries导入Maven Dependencies时,发现 ...
- 12月中旬项目中出现的几个bug解决方法的思考
这周做的项目遇到2个费了很多时间才解决的bug,解决之后,发现根本问题并不是什么很难的技术难点,都是因为自己在写代码的过程中,思维不够清晰.还有一个需要再提高的地方就是解决问题的思维,如何快速定位到问 ...
随机推荐
- 一篇文章带你了解轻量级Web服务器——Nginx简单入门
一篇文章带你了解轻量级Web服务器--Nginx简单入门 Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件代理服务器 在本篇中我们会简单介绍Nginx的特点,安装,相关指令使用以及配置信 ...
- Bob 的生存概率问题
Bob 的生存概率问题 作者:Grey 原文地址: 博客园:Bob 的生存概率问题 CSDN:Bob 的生存概率问题 题目描述 给定五个参数 n , m , i , j , k,表示在一个 n*m 的 ...
- 云小课|MRS基础原理之MapReduce介绍
阅识风云是华为云信息大咖,擅长将复杂信息多元化呈现,其出品的一张图(云图说).深入浅出的博文(云小课)或短视频(云视厅)总有一款能让您快速上手华为云.更多精彩内容请单击此处. 摘要:MapReduce ...
- 2022,一个Java程序猿的外设配置
工欲善其事,必先利其器. 是的没错,我就是个器材党,哈哈.正赶上搬家布置了新桌面,经过我的精心挑选和安装,也是凑齐了我新一套的桌面外设.写下来记录一下. 键盘 套件:腹灵MK870 轴体:佳达隆G白P ...
- java学习之注解
0x00前言 1.注解是什么: (1)可以叫做注释类型,注解是一种引用数据类型,编译后也是生成class文件 (2)提供信息给编译器: 编译器可以利用注解来探测错误和警告信息 比如 @Override ...
- vulnhub靶场之DOUBLETROUBLE: 1
准备: 攻击机:虚拟机kali.本机win10. 靶机:DOUBLETROUBLE: 1,网段地址我这里设置的桥接,所以与本机电脑在同一网段,下载地址:https://download.vulnhub ...
- orcle恢复报错:ORA-00392: 日志 2 (用于线程 1) 正被清除, 不允许操作
遇到问题 RMAN> alter database open resetlogs; RMAN-00571: =========================================== ...
- WeetCode2滑动窗口系列
系列文章目录和关于我 一丶[无重复字符的最长子串](3. 无重复字符的最长子串 - 力扣(Leetcode)) 思路: 维护一个窗口,窗口中不存在重复的字符,窗口右边界从第一个字符移动到最后,使用一个 ...
- 关于mysql数据库user表没有password字段
解决 这个是因为mysql的版本问题,是mysql 5.7版本出现的,具体是mysql 5.7.x 开始变化的我不知道 新的字段变更为authentication_string 修改密码的方式还是和原 ...
- 如何理性看待国内大热的HuTool工具包
一.序言 关于HuTool工具包,相信很多技术朋友都听说甚至使用过.在HuTool之前,已经有比较成熟的工具包比如Apache Common包,谷歌推出的Guava包,他们已经在全世界大范围使用了. ...