首先,检查项目中根目录.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配置冲突问题的更多相关文章

  1. 在 Ionic2 TypeScript 项目中导入第三方 JS 库

    原文发表于我的技术博客 本文分享了在Ionic2 TypeScript 项目中导入第三方 JS 库的方法,供参考. 原文发表于我的技术博客 1. Typings 的方式 因在 TypeScript 中 ...

  2. 在TypeScript项目中进行BDD测试

    在TypeScript项目中进行BDD测试 什么是BDD? BDD(Behavior-Driven Design)是软件团队的一种工作方式,通过以下方式缩小业务人员和技术人员之间的差距: 鼓励跨角色协 ...

  3. Vue+Typescript项目中使用echarts

    方案一:推荐 在typescript+Vue的项目中引用echarts,为了加强引用,引入echarts和@types/echarts两个包,一个是工程依赖,一个是声明依赖. npm install ...

  4. typescript项目中import 图片时报错:TS2307: Cannot find module ‘...’

    最近在用typescript写项目时,我用import来加载一个图片,webpack编译文件是会报错如下: 报错: 解决: 如果在js中引入本地静态资源图片时使用import img from './ ...

  5. VS Code 自动修改和保存 代码风格 == eslint+prettier

    最近因为用到VS Code,需要统一所有人的代码风格(前端语言js/html/css等,或者后端语言 go/python等也可以这么用). 所以参考了一些网络资料,记录下设置步骤,以便后续查阅. St ...

  6. 在项目中导入MRC的文件时解决办法

    1.由于在项目中要使用到第三方框架和其他的类的时候,而它用的是MRC的时候,其最简便的方法:完成从MRC到ARC的转换. 1.点击工程文件,进入到工程的设置里面. 2.看见Build Phases,就 ...

  7. myeclipse中项目名有红叉,但项目中文件没有报错的解决办法

    导入了别人的项目,各种jar包都放好后,path也都build好了,项目也能正常启动,但是就是项目名有红叉,这是为什么呢? 网上有人说Java build path中的jar包missing了,这是一 ...

  8. 学习笔记——make项目中克隆GitHub目录失败的解决

    在示例项目中执行make后出现下面的错误 WARNING: Missing submodule components/json/cJSON... WARNING: Missing submodule ...

  9. maven项目中找不到Maven Dependencies解决办法

    用eclipse创建maven项目后,在Deployment Assembly中通过Add...->Java Build Path Entries导入Maven Dependencies时,发现 ...

  10. 12月中旬项目中出现的几个bug解决方法的思考

    这周做的项目遇到2个费了很多时间才解决的bug,解决之后,发现根本问题并不是什么很难的技术难点,都是因为自己在写代码的过程中,思维不够清晰.还有一个需要再提高的地方就是解决问题的思维,如何快速定位到问 ...

随机推荐

  1. TCP 序列号和确认号是如何变化的?

    大家好,我是小林. 在网站上回答了很多人的问题,我发现很多人对 TCP 序列号和确认号的变化都是懵懵懂懂的,只知道三次握手和四次挥手过程中,ACK 报文中确认号要 +1,然后数据传输中 TCP 序列号 ...

  2. k8s集权IP更换

    -.背景描述 背景:在场内进行部署完成后标准版产品,打包服务器到客户现场后服务不能正常使用,因为客户现场的IP地址不能再使用场内的IP,导致部署完的产品环境在客户现场无法使用:此方案就是针对这一问题撰 ...

  3. 关于网页实现串口或者TCP通讯的说明

    概述 最近经常有网页联系我,反馈为什么他按我说的方法,写的HTML代码,无法在chrome网页中运行.这里我统一做一个解释,我发现好多网页并没有理解我的意思. 其实,要实现在HTML中进行串口或者TC ...

  4. JVM学习笔记——内存结构篇

    JVM学习笔记--内存结构篇 在本系列内容中我们会对JVM做一个系统的学习,本片将会介绍JVM的内存结构部分 我们会分为以下几部分进行介绍: JVM整体介绍 程序计数器 虚拟机栈 本地方法栈 堆 方法 ...

  5. 【深入浅出 Yarn 架构与实现】2-3 Yarn 基础库 - 服务库与事件库

    一个庞大的分布式系统,各个组件间是如何协调工作的?组件是如何解耦的?线程运行如何更高效,减少阻塞带来的低效问题?本节将对 Yarn 的服务库和事件库进行介绍,看看 Yarn 是如何解决这些问题的. 一 ...

  6. Redis的攻击手法

    目录 Redis概述 Redis未授权 漏洞发现 漏洞验证 Redis写shell 漏洞利用 Redis写公钥 漏洞利用 主从复制RCE 漏洞简介: 漏洞利用 计划任务反弹shell 漏洞利用 Red ...

  7. PHP实现CURL发送请求

    public function curl($url, $params = false, $ispost = 0) { $httpInfo = array(); //初始化 $ch = curl_ini ...

  8. Destination folder must be accessible

    问题 Ecplise拖入文件夹项目时提示错误:Destination folder must be accessible 解决 导入的时候包不能直接拖入,要使用import导入,选择File-> ...

  9. <一>对象使用过程中背后调用了哪些方法

    代码1 #include <iostream> using namepspace std; class Test { public: Test(int a=10):ma(a){cout&l ...

  10. 18V降压3.3V,15V降压3.3V的降压IC和LDO芯片方案

    在 18V 和 15V 输入中,我们需要给其他电源电路提高供电,有的电路的供电电压在 5V,或者是 3.3V 时, 我们就需要使用降压芯片来组建一个降压电路来给后面的的电路,提供稳定的,持续的 3.3 ...