https://eslint.cn

https://zh-hans.eslint.org/

https://eslint.bootcss.com/docs/user-guide/configuring

https://www.jianshu.com/p/602b50d4c3f9/ ESLint 常用规则

prettier中文网址:

https://www.prettier.cn    

 

ESLint完整规则(rules)地址：https://eslint.org/docs/rules/
中文版：https://cn.eslint.org/docs/rules/

 vite

 typescript-eslint 中文网 (nodejs.cn)

https://typescript-eslint.nodejs.cn/getting-started/

 

常用规则

https://blog.51cto.com/u_16099270/10239312
 

export default defineConfig({
　　server: {
　　　　hmr: {
　　　　　　overlay: false
　　　　}
　　},
})

vite+vue3项目，配置eslint+Prettier：

https://blog.csdn.net/qq_35017350/article/details/128872712 

 

npm run lint --fix


webpack

vue3.0关闭eslint校验的3种方法详解：

https://www.jb51.net/javascript/290794yv5.htm
 

各种关闭eslint方法总结

https://blog.csdn.net/Achong999/article/details/128986360

 

vsCode配置Eslint+Prettier结合使用详细配置步骤，规范化开发

https://blog.csdn.net/qq_36784628/article/details/125483886

 

配置示例：

{
  "semi": 2,
  "semi": [2, 'always', {"omitLastInOneLineBlock": true}],
}

其中"semi" 是这条规则的名称，表示是否应该在行尾使用分号。"semi" 对应的值可以是一个值或者一个数组：

  • 如果为值，在该值为这条规则的错误级别，其他选项为默认。
  • 如果为数组，数组中各项都有特定含义，如：数组第一项为该规则的错误级别(level)，数组的其他项为该规则 配置选项(options)。
 

 eslint 9.X的版本采用了新的系统配置

 

使用前提

要使用 ESLint，你必须使用内置 SSL 支持的 Node.js 版本（^12.22.0、^14.17.0 或 >=16.0.0），如果你使用的是官方 Node.js 发行版，那么已经内置了 SSL 支持。

快速开始

你可以使用该命令安装并配置 ESLint：

npm init @eslint/config

如果你想使用托管在 npm 上的指定可共享配置，你可以使用 --config 选项并指定包名：

# 使用 `eslint-config-semistandard` 可共享配置
# npm 6.x
npm init @eslint/config --config semistandard
# ⚠️ npm 7+ 需要使用额外的双杠：
npm init @eslint/config -- --config semistandard
# 或（可以省略 `eslint-config` 前缀）
npm init @eslint/config -- --config eslint-config-semistandard



--config 标志也支持传递数组：

npm init @eslint/config -- --config semistandard,standard
# 或
npm init @eslint/config -- --config semistandard --config standard

配置

注意：如果你正在使用 1.0.0 以前的版本，请阅读迁移指南。

在运行 npm init @eslint/config 后，你的目录下会有 .eslintrc.{js,yml,json} 文件。在里面你可以看到类似于这样的一些已经配置好了的规则：

{
    "rules": {
        "semi": ["error", "always"],
        "quotes": ["error", "double"]
    }
}

手动设置

你也可以在项目中手动设置 ESLint.

在开始前你必须确保存在 package.json 文件。如果不存在，请优先运行 npm init 或 yarn init 来创建此文件。

 

vscoe编辑器中配置代码规范及格式化

步骤一，安装 vscod  格式化插件：

eslint  做约束

Prettier - Code formatter  自动格式化代码

步骤二：修改prettier规则遵从eslint规则 （eslint 和 prettier有冲突部分）

.prettierrc文件
{
"singleQuote": false, //不适用单引
"semi": false, //结尾不用分号
"tabWidth": 4 // 缩进4格字符
"trailingComma": "none" // json数据最后一组不用逗号,
}

 

步骤三： 格式化单个文档(当安装了多个格式化工具时，可以在这里选择某一个工具使用)

步骤四：配置保存时格式化代码

 

保存代码时自动规范格式​ ,在vscode中进行配置，按住ctrl+shift+p,输入setting,打开setting.json,完成以下配置：

{
// 在保存时自动格式化。该设置是为了防止与 eslint、prettier 冲突，但是新版本中默认值就是false。（格式化程序必须可用，延迟后文件不能保存，并且编辑器不能关闭）

"editor.formatOnSave": true,
// 保存时自动启用 eslint --fix 自动修复
"editor.codeActionsOnSave": {
//"source.fixAll": true,
//"eslint.autoFixOnSave" : true,

"source.fixAll.eslint": "explicit" // 当保存的时候，eslint自动帮我们修复错误


},
// 配置eslint适用于vue代码
"eslint.validate": [
"vue",
"javascript",
// "typescript",
// "typescriptreact",
// "html",
// {
// "language":"vue",
// "autoFix":true
// }
],
}

原文链接：https://blog.csdn.net/weixin_42349568/article/details/120937200

 

报错问题

关于ESLint: Delete `␍`(prettier/prettier) 错误解决方案（3种）

转载： https://www.cnblogs.com/zsnhweb/p/18155708

1.点击VSCode右下角LF/CRLF然后根据弹窗修改成LF即可
2.在.eslintrc.cjs中增加配置
"rules": {
"prettier/prettier": ["error", { "endOfLine": "auto" }]
}
3.关闭git自动转换
这个问题是因为Windows在换行的时候，同时使用了回车符CR和换行符LF，即CRLF; 而项目仓库中默认是Linux环境下提交的代码，文件默认是以LF结尾的，因此，文本文件在不同系统下创建和使用时就会出现不兼容的问题，当我用windows电脑git clone代码的时候，若我的autocrlf(在windows下安装git，该选项默认为true)为true，那么文件每行会被自动转成以CRLF结尾，若对文件不做任何修改，pre-commit执行eslint的时候就会提示你删除CR。
git config --global core.autocrlf false
注：关闭之后需要重新克隆项目才能生效

 

 // ============================== eslint + prettier 基础知识

<!-- 注意：
off: 0, warn: 1, error: 2
参考文档 ：
https://juejin.cn/post/6990929456382607374  🤫鸿泽 视频相关
https://blog.csdn.net/m0_64289188/article/details/147110688
https://blog.csdn.net/weixin_73092591/article/details/144348933
https://blog.csdn.net/qq_58870434/article/details/147094448

规则使用优先级：eslintrc prettierrc文件的配置 > vscode编辑器的配置

创建项目eslint类型选择： syntax and find problems 检擦句法并发现问题

eslint 和 Prettier 的设置要统一，避免冲突报错

1、安装 eslint、prettier

npm i eslint prettier -D

2、其他插件：npm i prettier eslint-config-prettier eslint-plugin-prettier @vue/eslint-config-prettier -D
 eslint-plugin-prettier
是一个ESLint插件，其主要作用是将Prettier作为ESLint的规则来运行。
意味着可以使用ESLint来检查代码是否符合Prettier的格式化规则，通
常将其配置在extends数组中的最后一位，以便可以覆盖其他风格配置规则。
{
  "extends": ["plugin:prettier/recommended"]，
  rules: {  }
}

eslint-config-prettier
这个配置文件会关闭ESLint中与Prettier冲突的规则
 解答：eslint-config-prettier/flat 中的 flat 是专门为扁平配置（eslint.config.js）提供的版本
即关闭 eslint 规则，并使用 prettier 规则

import eslintConfigPrettier from "eslint-config-prettier/flat";
export default [
eslintConfigPrettier,
];

 

其他通用插件：
prettier、 eslint、 eslint-plugin-prettier、 eslint-config-prettier、 @typescript-eslint/parser、 eslint-config-airbnb、 eslint-config-airbnb-typescript、 eslint-config-airbnb-base、 eslint-plugin-jsx-a11y

需注意各依赖版本兼容性，检测可用搭配："prettier": "3.4.1" "eslint-plugin-prettier": "5.0.0" "eslint-config-prettier": "6.14.0" "eslint": "^7.11.0" "@typescript-eslint/parser": "^4.5.0"
其他常用依赖：
eslint-plugin-import 对 import/export 语法进行检查，防止文件路径和导入名称拼写错误的问题
 
主要配置调试
useEditorConfig 配置用于控制是否使用.editorconfig文件中的配置来覆盖Prettier的默认设置。默认值为 false（即不使用默认的.editorconfig配置文件中定义的任何配置，不覆盖来自prettier的配置）。
设置为true时，确保你的项目中有.editorconfig文件（通常位于项目的根目录下，用于定义编码风格,并确保你的IDE配置了支持.editorconfig文件），并且它包含了你想让Prettier使用的设置。
1）将vscode的settings.joon文件设置为：使用editorConfig配置文件。则，

 则：

 2）将vscode的settings.joon文件设置为：使用editorConfig配置文件。则，

 

3）当下载了npm包之后，创建.prettierrc文件，不论 "prettier.useEditorConfig":的值设置为true还是false。
清空了.prettierrc文件的配置后（设为{}）：  都会走编辑器它自己默认的校验
.prettierrc文件中添加了配置项后（与setting.json中配置一致）： 都会走.prettierrc文件的校验
以上两种情况，自动天降了.prettierrc文件后， setting.json文件中的这几项配置就不再起作用。

 


3、几个配置文件

.eslintignore：忽略代码检查的配置文件

.eslintrc.js：代码检查规则的配置文件  （执行命令 npx eslint --init 后自动生成的文件，文件后缀类型：js, mjs, cjs, json等等）

.prettierignore：忽略代码格式化的配置文件

.prettierrc：代码格式化的配置文件 （手动创建的文件）~
-->

# ------------------------ eslint

npx eslint --fix xxx 修复xxx文件

<!--
eslint 做代码的语句检查
只检测js代码
vscode插件： eslint

eslintrc.js文件配置规则(如果json文件，直接 { ...})：
off: 0, warn: 1, error: 2
module.exports = {
  ...
  rules: {
      // eslint默认这两个配置 与prettier冲突的
      quotes: [2, 'double'], //错误，必须双引号
      // "semi": 2,
      semi: [  //错误，必须有分号结尾
        2,
        'always',
        {
          omitLastInOneLineBlock: true,
        },
      ],

      // 数组和对象是否采用解构赋值检查 即对象，正确赋值：var {a, b} = obj；let [e] = arr;  错误赋值：var a = obj.a; b=obj.b; let aaa = arr[0];
      "prefer-destructuring":[
        "error",{
          "array": false,  // 数组不检查
          "object": true  // 对象检查解构赋值
        }]
    }
  }
-->

一、项目中配置 eslint

## 初始化 json

npm init -y

## 下载 eslint

npm i -D eslint

## 根据项目的类型和需求生成一个.eslintrc.js 配置文件，本项目中 eslint 版本 9.2x ， 语言选择了 none of these，结果生成了 eslint.config.mjs， （也可以手动创建该文件）

npx eslint --init
或者
npm init @eslint/config

## 运行 eslint 检查代码

eslint src/index.js
eslint src/index.js --fix 修复问题

二、VSCode配置 ESLint 执行代码检查

在VSCode安装插件 ESLint

### 配置方式一：

打开设置（快捷键 Ctrl + ,）
搜索 Eslint: Enable，勾选 controls whether eslint is enabled or not
搜索 Eslint: Validate, 添加想要检查的类型如：
"eslint.validate": [
"javascript",
"javascriptreact",
"typescript",
"typescriptreact",
"vue",
"css",
"html",
"postcss",
"json"
],
搜索 Editor: Code Actions On Save, 添加保存时想要检查的类型如：
"editor.codeActionsOnSave": {
"source.fixAll.eslint": "explicit" // 当保存的时候，eslint自动帮我们修复错误
// "source.fixAll.eslint": true, // 按照文档的配置规则自动修复
},

### 配置方式二： 直接修改settings.json文件代码

打开VSCode的设置（可以通过点击左下角齿轮图标或按Ctrl + ,快捷键， 点开右上角的按钮进入setting.json配置文件）。
或者在设置搜索框中输入settings.json并打开该文件。
在settings.json文件中添加以下内容：
{

"editor.formatOnPaste": true, // 控制编辑器是否自动格式化粘贴的内容。格式化程序必须可用，并且能针对文档中的某一范围进行格式化
"editor.formatOnType": true, // 控制编辑器在键入一行后是否自动格式化该行。
"editor.formatOnSave": true, // 在保存时格式化文件。格式化程序必须可用，延迟后文件不能保存，并且编辑器不能关闭
"editor.defaultFormatter": "esbenp.prettier-vscode", // 默认所有文件的格式化， 如果以下各类文件不单独设置，则以默认为主，如果有单独设置，则覆盖此默认设置。 定义一个默认格式化程序, 该格式化程序优先于所有其他格式化程序设置。必须是提供格式化程序的扩展的标识符

// eslint检查的文件
"eslint.validate": [
"javascript",
"javascriptreact",
"typescript",
"typescriptreact",
"vue",
"css",
"html",
"postcss",
"json"
],
"breadcrumbs.enabled": false, // #每次保存的时候将代码按eslint格式进行修复
// "prettier.semi": false,//prettier 设置语句末尾不加分号
"prettier.singleQuote": true, // prettier 设置强制单引号
"eslint.codeAction.showDocumentation": {
// 在快速修复菜单中显示打开的lint规则文档网页(显示eslint 信息)。
"enable": true
},
// "eslint.enable": true, //启用eslint
// "eslint.autoFixOnSave": true, // 该配置已经弃用，被codeActionsOnSave设置替代
"editor.codeActionsOnSave": {
"source.fixAll.eslint": "explicit" // 当保存的时候，eslint自动帮我们修复错误
// "source.fixAll.eslint": true, // 按照文档的配置规则自动修复
},

"eslint.autoFixOnSave": true, // 该设置已弃用。请使用editor.codeActionsOnSave，并使用source.fixAll.eslint成员。2.打开或关闭保存时的自动修复
"eslint.alwaysShowStatus": true, // 未知配置设置,没有可用的快速修复程序
}

# ------------------------ prettier

https://github.com/smastrom/sublime-prettierd-format

<!--
npx prettier --write xxx 格式化xxx文件
prettier做代码的格式美化
注意：
网络有说 vue2使用脚手架配置prettier报错：‘prettier/prettier‘: context.getPhysicalFilename is not a function
原因：出现这个错误大概率是由于相关联的依赖之间的版本不互相兼容导致的

// prettierrc.js文件基本格式设置， 如果json文件，直接 { ...}
这两个默认的配置与eslint冲突，所以配置的时候根据需要覆盖默认配置
module.exports = {
  semi: true,// 语句末尾加分号（默认 false）
  singleQuote: false,// 使用双引号而不是单引号（默认 true）
  "tabWidth": 2 // 缩进为2个空格
}
-->

一、项目中配置 prettier

npm i prettier -D

## 根目录创建文件:

.prettierrc.js
.prettierignore

## 执行命令

npx prettier --write src/index.js // 检查js文件
npx prettier --write src/style.css // 检查css文件

## 自动修复常见问题 要启用自动修复，可以在运行 prettier --write 命令时添加 --fix 选项：

prettier --write "\*_/_.js" --fix

## 项目的 package.json 中添加格式化命令(这条命令会遍历项目中的所有文件并格式化（包括 js、ts、vue、json 等支持的文件类型）。)

"scripts": {
"format": "prettier --write ."
}
npm run format

二、VSCode编辑器配置 Prettier
在 VSCode中插件安装中搜索 ESLint、Prettier - Code formatter、Vetur(因为Prettier不能格式化vue文件的template，所以使用Vetur)、这三个插件并安装。
注意： vscode中安装npm包prettier，之后必须 配置以下两项才能生效（保存代码时自动格式化代码）： 
  "editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
## 配置方式一：
打开设置（快捷键 Ctrl + ,）
1、搜索 Format On Save，勾选 Editor: Format On Save     

 

2、搜索 Default Formatter，设置为 esbenp.prettier-vscode

 

## 配置方式二： 修改settings.json文件代码

打开VSCode的设置（可以通过点击左下角齿轮图标或按Ctrl + ,快捷键， 点开右上角的按钮进入setting.json配置文件）。
或者在设置搜索框中输入settings.json并打开该文件。
在settings.json文件中添加以下内容：
保存时的格式化工具全局设置为 esbenp.prettier-vscode （只有设置了，这两条，.prettierrc的配置文件才生效）
  "editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
<!-- // ======== prettier自动保存时代码格式化（针对不同语言） ======== https://blog.csdn.net/m0_64289188/article/details/147110688 -->
"[html]": {
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescriptreact]": {
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascriptreact]": {
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[css]": {
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[less]": {
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[scss]": {
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
// 关闭js的格式化
"[javascript]": {
"editor.formatOnSave": false,
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[json]": {
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[jsonc]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
}

 

## vscode中 不添加任意结尾逗号，不强制使用单引号问题，分号等问题的配置
{
<!-- 注意：
useEditorConfig 必须设置为 false， 其他的配置才起作用
prettier.requireConfig 最好不要设为 true
vetur插件的配置也不需要（其他文档中说需要）
-->
// https://blog.csdn.net/iotjin/article/details/118015468

"prettier.useEditorConfig": false, // 不使用editorConfig配置文件， 以下设置才生效
"prettier.trailingComma": "none", //禁止随时添加逗号 （需要安装vetur 是否末尾添加逗号的字段，但是设置无效 ）
"prettier.singleQuote": false, // prettier 设置非单引号
"prettier.semi": false, // 禁止随时添加分号
"prettier.printWidth": 300, // 每行文字个数超出此限制将会被迫换行
}


## 其他配置项
{
// configPath 直接指定一个配置文件的路径，指定后会优先使用这个外部配置文件中的规则，而不是默认的配置。
// 需要在项目根目录或指定位置创建一个Prettier配置文件，通常命名为.prettierrc或.prettierrc.json。
// 如，创建文件C:\Users\Administrator\.prettierrc，或者.prettierrc.js文件都可以
// "prettier.configPath": "C:\\Users\\xxxx\\.prettierrc",

// requireConfig 用于在配置文件中指定Prettier的配置来源 ，可以在项目的根目录，持多种格式，JSON、YAML、JS或TOML等。
// 在该配置文件中，作为配置选项，指定是否加载配置文件。 为true则会尝试加载配置文件（应该事自动查找）。如果没有找到配置文件，它将使用默认的格式化规则。为false将使用默认的格式化规则。
// "prettier.requireConfig": false,

// requireConfig 和 configPath可以配合使用
// 如果你不确定是否有配置文件存在，或者你想确保总是使用特定的配置文件，可以使用 requireConfig: true 并配合 configPath 指定确切路径。
// 如果你知道确切的配置文件位置，并且希望避免自动查找的开销，直接使用 configPath 会更直接和高效
}


1、创建文件.prettierrc。（C:\Users\Administrator\.prettierrc），添加内容：
{
singleQuote: false,
semi: false,
tabWidth: 4,
trailingComma: "none",
printWidth: 300
}
2、在setting.json文件中配置:
{
"prettier.configPath": "C:\\Users\\xxxx\\.prettierrc",
}

 


# ------------------ stylelint 样式格式化

https://blog.csdn.net/weixin_73092591/article/details/145932232?spm=1001.2014.3001.5501

一、简介
Stylelint是一款强大的现代CSS代码检查工具，它支持多种CSS预处理器语法，如SCSS和LESS。通过合理配置Stylelint规则，并结合编辑器插件，在保存文件时自动修复代码格式

二、安装Stylelint相关依赖
npm install stylelint stylelint-config-standard -D
npm install stylelint-config-css-modules stylelint-config-prettier stylelint-config-rational-order -D

依赖介绍：
stylelint：核心工具
stylelint-config-standard：提供了一个标准的CSS代码风格配置基础（官方推荐）
stylelint-config-rational-order：是一个 Stylelint 配置，它按照逻辑顺序对相关的 CSS 属性声明进行分组排序
stylelint-config-prettier : 该配置用于解决 StyleLint 和 Prettier 之间的规则冲突问题
stylelint-config-css-modules : 是一个 Stylelint 配置，专门用于支持 CSS Modules 的样式检查

三、添加Stylelint配置
在项目的根目录下创建一个.stylelintrc.json文件，内容如下（规则可自行添加）：
module.exports = {
extends: [
'stylelint-config-standard',
'stylelint-config-css-modules',
'stylelint-config-rational-order',
'stylelint-config-prettier',
],
plugins: [
'stylelint-order',
'stylelint-config-rational-order/plugin',
'stylelint-declaration-block-no-ignored-properties',
],
rules: {
'declaration-empty-line-before': null,
'no-descending-specificity': null,
'selector-pseudo-class-no-unknown': null,
'selector-pseudo-element-colon-notation': null,
'property-no-unknown': [
true,
{
ignoreProperties: ['line-width'],
},
],
},
};

四、VSCode编辑器配置Stylelint保存时自动修复

1、vscode插件市场中搜索安装 stylelint

2、在settings.json文件中添加以下配置：
"stylelint.enable": true,
"stylelint.validate": ["css", "less", "postcss", "scss", "sass"],
"editor.codeActionsOnSave": {
"source.fixAll.eslint": "explicit" // 当保存的时候，eslint自动帮我们修复错误
"source.fixAll.stylelint": "explicit"
},
"editor.formatOnSave": false,

## 注意： 实际本地没有做stylelint配置 使用了 prettier来格式化样式文件

# 配置文件的内容

https://blog.csdn.net/m0_64289188/article/details/147110688

------------------ .eslintrc.js
module.exports = {
env: {
browser: true,
node: true,
es6: true,
},
// 全局变量可定义在这里，避免在文件中引用报红
globals: {
test1: 'readonly', // 不允许被重写
test2: 'writable', // 允许被重写
},
parserOptions: {
ecmaVersion: 6,
ecmaFeatures: {
jsx: true,
},
sourceType: 'module',
project: 'tsconfig.json',
tsconfigRootDir: \_\_dirname,
},
extends: [
'airbnb',
'airbnb-typescript',

    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:prettier/recommended',
    'plugin:react-hooks/recommended',

    'prettier/react',
    'prettier/@typescript-eslint',

],
plugins: ['react', 'react-hooks', 'jsx-a11y', '@typescript-eslint'],

rules: {
quotes: [2, 'single'],
semi: [2, 'always'],
eqeqeq: 2,
'no-alert': 2,
'eol-last': 2,
'func-call-spacing': 2,
'keyword-spacing': 2,
'rest-spread-spacing': 2,
'template-tag-spacing': 2,
'array-callback-return': 2,
'max-len': ['error', { code: 120 }],
'no-undef': 2,
},
parser: '@typescript-eslint/parser',
settings: {
// support import modules from TypeScript files in JavaScript files
'import/resolver': {
node: {
extensions: ['.js', '.jsx', '.ts', '.tsx'],
},
alias: [

      ],
    },
    'import/parsers': {
      '@typescript-eslint/parser': ['.ts', '.tsx', 'js'],
    },
    polyfills: ['fetch', 'Promise', 'URL', 'object-assign'],

},
};

------------------ .prettierrc.cjs

<!-- - Prettier 配置文件
- 官方配置文档：https://prettier.io/docs/en/options.html
注意：vscode中 该文件要起作用，必须在setting.json中配置 ： "editor.defaultFormatter": "esbenp.prettier-vscode",  // 安装prettier包之后，不设置此项，则.prettierrc的配置在cscode保存时不起作用
 -->

module.exports = {
 
// 每行最大长度，超出自动换行（默认80）
printWidth: 120,

// 缩进空格数（默认2）
tabWidth: 2,

// 使用空格缩进而非 tab（默认false）
useTabs: false,

// 语句末尾加分号（默认true）
semi: true,
 
// json 末尾添加逗号
trailingComma: "none", //禁止随时添加逗号

// 使用双引号而不是单引号（默认false）
singleQuote: false,

// 对象属性是否使用引号（"as-needed" 仅在必须时添加）
quoteProps: "as-needed",

// 在对象字面量中 key 与 value 之间添加空格（默认true）
bracketSpacing: true,

// 箭头函数参数是否使用括号
// "avoid"：仅在必要时添加括号
// "always"：始终添加括号
arrowParens: "avoid",

// 文件范围格式化的起始与结束位置（默认全文件）
rangeStart: 0,
rangeEnd: Infinity,

// 行尾换行符类型（auto 代表跟随系统/原文件）
endOfLine: "auto",

// 是否格式化内嵌语言的内容（如 HTML 中的 <script>）
embeddedLanguageFormatting: "auto",

// ==============================
// HTML / JSX 设置
// ==============================

// HTML 中的空格敏感性
// "ignore"：忽略空格影响
htmlWhitespaceSensitivity: "ignore",

// 多行 JSX 标签的 > 是否放在最后一行末尾
bracketSameLine: true, // 适用于所有 HTML/JSX
jsxBracketSameLine: false, // 仅适用于 JSX，建议保持 false

// JSX 属性中使用双引号（false 表示使用双引号）
jsxSingleQuote: false,

// 多行对象、数组、函数参数、调用等是否保留末尾逗号
// "es5"：ES5 语法支持的地方添加（对象、数组等）
trailingComma: "es5",

// ==============================
// 文件类型解析器覆盖
// ==============================

overrides: [
{
// Vue 文件使用 vue 解析器
files: "*.vue",
options: {
parser: "vue",
},
},
{
// HTML 文件使用 html 解析器
files: "*.html",
options: {
parser: "html",
},
},
{
// Markdown 文件使用 markdown 解析器
files: "*.md",
options: {
parser: "markdown",
},
},
],

// ==============================
// 其他
// ==============================

// 指定默认解析器为 babel（可自动根据文件推断）
parser: "babel",
};

------------------ .prettierignore

<!--
写法如下：
/dist
/node_modules
或者
dist
node_modules
-->

# 忽略目录 具体内容

**/node_modules/**
**/.git/**
**/.next/**
**/dist/**
**/build/**
**/coverage/**

# 忽略特定文件类型

_.min.js
_.min.css

# 忽略特定文件

package-lock.json
yarn.lock

# 忽略配置文件

**/.env
**/.env.local

# 忽略IDE相关文件

.vscode/
.idea/

# 忽略测试快照文件

**/**snapshots**/**

# 忽略自动生成的文件

**/generated/**

# 忽略文档文件

**/\*.md
**/\*.mdx

# 忽略图片等二进制文件

**/\*.png
**/_.jpg
\*\*/_.jpeg
**/\*.gif
**/_.svg
\*\*/_.ico

# 忽略日志文件

\*.log

------------------ setting.json
{
// ====================== 安全 & 交互 ======================
"security.workspace.trust.untrustedFiles": "open", // 对于不受信任的文件，直接打开

// ====================== 界面设置 ======================
"workbench.colorTheme": "One Dark Pro", // 代码编辑器主题
"workbench.iconTheme": "material-icon-theme", // 资源管理器图标主题
"workbench.layoutControl.enabled": false, // 关闭工作台布局控制
"window.zoomLevel": 1, // 界面缩放级别

// ====================== 编辑器行为 ======================
"editor.fontLigatures": false, // 禁用连字（特殊字符连接显示）
"editor.mouseWheelZoom": true, // 允许使用鼠标滚轮 + Ctrl 进行缩放
"editor.defaultFormatter": "esbenp.prettier-vscode", // 默认代码格式化工具（Prettier）
"editor.formatOnPaste": true, // 粘贴时自动格式化代码
"editor.formatOnSave": true, // 
在保存时自动格式化文件。该设置是为了防止与 eslint、prettier 冲突，但是新版本中默认值就是false。（格式化程序必须可用，延迟后文件不能保存，并且编辑器不能关闭）
"editor.linkedEditing": true, // HTML 关联编辑（修改标签时同步修改闭合标签）
"editor.minimap.enabled": false, // 关闭代码小地图（minimap）
"editor.tabCompletion": "on", // 启用 Tab 补全
"editor.fontSize": 16, // 设置字体大小

// ====================== 文件管理 ======================
"files.autoSave": "onFocusChange", // 失去焦点时自动保存
"explorer.confirmDelete": false, // 关闭文件删除确认框
"explorer.confirmDragAndDrop": false, // 关闭拖拽文件确认框
"files.trimTrailingWhitespace": true, // 自动删除行尾空格
"files.insertFinalNewline": true, // 文件末尾自动添加换行符
"files.exclude": {
"**/.git": true,
// "**/.vscode": true,
"**/.DS_Store": true,
"**/node_modules": true,
"**/out": true,
"**/LICENSE": true
// "\*\*/.gitignore": true
}, // 资源管理器中隐藏无关文件夹

// ====================== 代码格式化（针对不同语言） ======================
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[plaintext]": {
"editor.defaultFormatter": "lkrms.inifmt"
},

// ====================== 文件类型关联 ======================
"files.associations": {
"_.html": "html",
"_.vue": "vue",
"\*.ts": "typescript"
},

// ====================== JavaScript & Vue 设置 ======================
"vue.autoInsert.dotValue": true, // Vue 3 模板中自动补全 `.value`
"javascript.updateImportsOnFileMove.enabled": "always", // JS 文件移动时自动更新 import

// ====================== Git 相关配置 ======================
"gitlens.gitCommands.skipConfirmations": [
"fetch:command",
"stash-push:command",
"switch:command"
], // GitLens 插件：跳过 fetch、stash、switch 的确认提示
"git.autofetch": true, // 自动从远程拉取最新代码
"git.enableSmartCommit": true, // 启用智能提交（未填写 commit message 也能提交）
"git.confirmSync": false, // 关闭 Git 同步确认框
"git.path": "D:/dev/app/git/Git/cmd/git.exe", // Git 可执行文件路径

// ====================== 其他设置 ======================
"extensions.ignoreRecommendations": true, // 忽略 VS Code 插件推荐
"diffEditor.ignoreTrimWhitespace": true, // 在 diff 视图中不忽略行尾空格变化

// ====================== Lingma AI 相关 ======================
"Lingma.cloudModelAutoTriggerGenerateLength": "long", // AI 生成长度（自动触发）
"Lingma.cloudModelManualTriggerGenerateLength": "long", // AI 生成长度（手动触发）
"Lingma.DisplayLanguage": "简体中文", // 界面语言
"Lingma.PreferredLanguage for AI Chat": "简体中文", // AI 聊天的首选语言
"Lingma.PreferredLanguage forCommitMessage": "简体中文",
"remote.SSH.remotePlatform": {
"hzh.sealos.run_ns-itmbl7jy_java-test": "linux"
},
"explorer.confirmPasteNative": false,
"gitblame.revsFile": [],
"typescript.updateImportsOnFileMove.enabled": "always"
}
 

------------------ setting.json
https://blog.csdn.net/iotjin/article/details/118015468
{
"workbench.iconTheme": "vscode-icons",
// -------------------- 配置eslint --------------------
//autoFixedOnSave 设置已废弃，采用如下新的设置，新版(>1.41.0)配置
"editor.codeActionsOnSave": {
// "source.fixAll.eslint": true

"source.fixAll.eslint": "explicit"  // 当保存的时候，eslint自动帮我们修复错误


},
"eslint.format.enable": true,
//autoFix默认开启，只需输入字符串数组即可
"eslint.validate": [
"javascript",
"vue",
"html",
"javascriptreact",
"vue-html"
],
// -------------------- 配置eslint --------------------
// 设置编辑器的默认格式化工具
"editor.defaultFormatter": "esbenp.prettier-vscode",  // 安装prettier包之后，不设置此项，则.prettierrc的配置在cscode保存时不起作用
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[css]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[less]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
//方法括号之间插入空格
"javascript.format.insertSpaceBeforeFunctionParenthesis": false,
// -------------------- vetur 配置 --------------------
// vue文件默认格式化工具：vetur
"[vue]": {
"editor.defaultFormatter": "octref.vetur"
},
// 这个按用户自身习惯选择
"vetur.format.defaultFormatter.html": "js-beautify-html",
// 让vue中的js按编辑器自带的ts格式进行格式化
// "vetur.format.defaultFormatter.js": "vscode-typescript",
// 让vue中的js按prettier进行格式化 用这个
"vetur.format.defaultFormatter.js": "prettier",
"vetur.format.defaultFormatterOptions": {
"js": "prettier",
"js-beautify-html": {
"wrap_attributes": "aligned-multiple" //当超出折行长度时，将属性进行垂直对齐
},
"prettyhtml": {
"tabWidth": 4, // 会忽略vetur的tabSize配置
"printWidth": 100, //每行100字符
"singleQuote": true, //是否使用单引号
"semi": false, // 句尾是否加;
"wrapAttributes": false,
"sortAttributes": false
},
//vue中的js生效
"prettier": {
"semi": false, // 句尾是否加;
"singleQuote": true, //是否使用单引号
"trailingComma": "none" //禁止随时添加逗号
}
},
// -------------------- vetur 配置 --------------------
// -------------------- koro1FileHeader 配置 --------------------
// 头部注释
"fileheader.customMade": {
"Author": "AuthorName",
"Date": "Do not edit", // 文件创建时间(不变)
"LastEditors": "AuthorName", // 文件最后编辑者
"LastEditTime": "Do not edit", // 文件最后编辑时间
"Description": ""
// "FilePath": "only file name", // 只有文件名
// "custom_string_obkoro1_copyright": "Copyright (C) ${now_year} AuthorName. All rights reserved.",
// "custom_string_obkoro1_date": "Do not edit" // 不带Date前缀的时间
},
// 函数注释
"fileheader.cursorMode": {
"description": "",
//"custom_string_obkoro1": "",
"param": "params",
"return": ""
},
// 插件配置项
"fileheader.configObj": {
"createHeader": false, // 新建文件自动添加头部注释，默认打开
"autoAdd": false, // 保存自动添加头部注释，开启才能自动添加，默认开启
"openFunctionParamsCheck": true, //函数注释自动提取函数的参数，默认开启
"createFileTime": true, // 默认为此文件的创建时间，设为false更改为当前生成注释的时间
"dateFormat": "YYYY-MM-DD HH:mm:ss", // 默认时间格式，修改影响所有时间字段
// 自定义注释中的艾特和冒号：
"atSymbol": ["@", "@"], // 所有文件的头部注释和函数注释的默认值 @
"colon": [": ", ": "] // 所有文件的头部注释和函数注释的默认值 :
// 自定义特殊字段名，Date、LastEditTime、LastEditors、Description、FilePath
// "specialOptions": {
// "Date": "since",
// "LastEditTime": "lastTime",
// "LastEditors": "LastAuthor",
// "Description": "message",
// "FilePath": "文件相对于项目的路径"
// }
// 函数参数配置
// "functionParamsShape": "normal", // 正常
// "functionParamsShape": "no bracket", // 没有方括号
// "functionParamsShape": "no type", // 没有类型
// "functionParamsShape": [ "{", "}"], // 函数参数外形自定义，默认值 {}
// "functionTypeSymbol": "*", // 参数没有类型时的默认值 *
// 函数设置不添加参数和类型 {*}
// "functionParamsShape": "no type", // 没有类型
// "functionTypeSymbol": "" // 参数没有类型时的默认值 *
},
// -------------------- koro1FileHeader 配置 --------------------
// -------------------- prettier 配置(以下配置主要针对.js) --------------------
"prettier.useEditorConfig": false, // 不使用editorConfig配置文件，设置才生效
"prettier.semi": false, // 句尾是否加;
"prettier.singleQuote": true, //是否使用单引号
"prettier.trailingComma": "none", //禁止随时添加逗号
// -------------------- prettier 配置 --------------------
"git.confirmSync": false,
"security.workspace.trust.untrustedFiles": "open"
}

 


------------------------------------------------------------ 我自己的 setting.json 开始

// {
//     "git.path": "D:/installed/Git/cmd/git.exe",
//     "git.autofetch": true,
//     "git.confirmSync": false,
//     "editor.unicodeHighlight.allowedCharacters": {
//         " ": true
//     },
//     "git.openRepositoryInParentFolders": "always",
//     "window.zoomLevel": -1,
//     "RainbowBrackets.depreciation-notice": false,
//     "workbench.colorTheme": "Atom One Light",
//     "workbench.colorCustomizations": {

//         "[eclipse-color-theme]": {
//             "editor.background": "#CCE8CF"
//         }

//     },
// }

{
    "workbench.colorTheme": "Atom One Light",
    "editor.tabSize": 2, //工作台主题颜色
    "typescript.updateImportsOnFileMove.enabled": "always",

    "vetur.format.defaultFormatter.js": "vscode-typescript", // #让vue中的js按编辑器自带的ts格式进行格式化
    "window.enableMenuBarMnemonics": false,
    "liveServer.settings.donotShowInfoMsg": true,
    // "workbench.colorTheme": "Winter is Coming (Light)", //窗口.不启用菜单栏输入法,修改主题配色
    "workbench.colorCustomizations": {
        // 颜色设置
        // "foreground": "#75a478",
        "editor.background": "#C7EDCC",
        // "editor.background": "#c1d8ac",
        "sideBar.background": "#CCE8CF", // 侧边栏
        "activityBar.background": "#9feba6", // 侧边活动栏
        "terminal.background": "#EAEAEF", //底部命令窗口

        "panel.background": "#CCE8CF" /*面板背景色，面板显示在编辑器区域下*/,
        "titleBar.activeBackground": "#9feba6" /*活动窗口标题栏背景色*/,
        "statusBar.background": "#CCE8CF" /*工作区打开时状态栏的背景色*/,
        "tab.activeBackground": "#9feba6" /*活动选项卡的背景色*/,
        "tab.inactiveBackground": "#CCE8CF" /*普通选项卡背景色*/,
        "editorGroupHeader.tabsBackground": "#CCE8CF" /*选项卡停靠位置的背景色*/
    },
    "files.autoGuessEncoding": true,
    "editor.suggestSelection": "first",
    "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
    "extensions.ignoreRecommendations": true,
    "window.zoomLevel": 0,
    "RainbowBrackets.depreciation-notice": false,
    "explorer.confirmDelete": false,
    "git.enableSmartCommit": true,
    "git.enabled": true, // 启用 Git 功能
    // "git.autofetch": true, // 自动拉取远程变更
    // "git.confirmSync": false, // 关闭同步确认提示
    // VS Code 默认会尝试从系统环境变量 PATH 中查找 Git。如果 Git 安装时未勾选 Add to PATH，则需手动指定路径
    "git.path": "D:/installed/Git/cmd/git.exe",

    "fittencode.languagePreference.displayPreference": "en",
    "fittencode.languagePreference.commentPreference": "en",
    "workbench.iconTheme": "vscode-icons",
    "baidu.comate.privateService": "",
    "baidu.comate.license": "d3e2c8b1-648e-40b9-8330-0532eb4f2048",
    "baidu.comate.enableSecurityEnhancement": false,
    "baidu.comate.completionLength": "auto",
    "baidu.comate.username": "Administrator",
    "diffEditor.codeLens": true,

    "editor.formatOnPaste": true, // 控制编辑器是否自动格式化粘贴的内容。格式化程序必须可用，并且能针对文档中的某一范围进行格式化
    "editor.formatOnType": true, // 控制编辑器在键入一行后是否自动格式化该行。
    "editor.formatOnSave": true, // 在保存时自动格式化文件。该设置是为了防止与 eslint、prettier 冲突，但是新版本中默认值就是false。（格式化程序必须可用，延迟后文件不能保存，并且编辑器不能关闭）
    // "editor.defaultFormatter": "Vue.volar", // 默认的代码格式化工具

    // ======== eslint 主要配置 ========
    // eslint检查的文件类型
    "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact", "vue", "css", "html", "postcss", "json"],
    "breadcrumbs.enabled": false, //
    "eslint.codeAction.showDocumentation": {
        // 在快速修复菜单中显示打开的lint规则文档网页(显示eslint 信息)。
        "enable": true
    },
    "eslint.enable": true, //启用eslint
    // "eslint.autoFixOnSave": true,  // 该配置已经弃用，被codeActionsOnSave设置替代
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": "explicit" // 当保存的时候，eslint自动帮我们修复错误
        // "source.fixAll.eslint": "true"
    },
    "eslint.format.enable": true,

    // ======== prettier (以下配置主要针对.js) ========
    //  https://blog.csdn.net/m0_64289188/article/details/147110688

    // configPath 直接指定一个配置文件的路径，指定后会优先使用这个外部配置文件中的规则，而不是默认的配置。
    // 需要在项目根目录或指定位置创建一个Prettier配置文件，通常命名为.prettierrc或.prettierrc.json。
    // 如，创建文件C:\Users\Administrator\.prettierrc，或者.prettierrc.js文件都可以
    // "prettier.configPath": "C:\\Users\\xxxx\\.prettierrc",

    // requireConfig 用于控制当找不到配置文件时 Prettier 的行为。即，是否加载配置文件（在根目录，支持多种格式，.prettierrc、prettier.config.js、package.json 、YAML、JS或TOML等）。
    // "prettier.requireConfig": false, // 在 Prettier的早期版本中，默认值是 false。这意味着如果没有找到配置文件，Prettier 仍然会尝试使用默认的配置来格式化代码。
    "prettier.requireConfig": true, // 在 Prettier 2.0 及更高版本中，默认值变为 true。这意味着如果没有找到配置文件，Prettier 将不会执行任何格式化操作，而是抛出一个错误，提示需要配置文件。
    // requireConfig 和 configPath可以配合使用
    // 如果你不确定是否有配置文件存在，或者你想确保总是使用特定的配置文件，可以使用 requireConfig: true 并配合 configPath 指定确切路径。
    // 如果你知道确切的配置文件位置，并且希望避免自动查找的开销，直接使用 configPath 会更直接和高效

    // https://blog.csdn.net/iotjin/article/details/118015468
    // useEditorConfig 配置用于控制是否使用.editorconfig文件中的配置来覆盖Prettier的默认设置。默认值为 false（即不使用默认的.editorconfig配置文件中定义的任何配置，不覆盖来自prettier的配置）。
    // 设置为true时，确保你的项目中有.editorconfig文件（通常位于项目的根目录下，用于定义编码风格,并确保你的IDE配置了支持.editorconfig文件），并且它包含了你想让Prettier使用的设置。
    "prettier.useEditorConfig": true, //  设置为true时，本项目在创建.prettierrc配置文件后，才生效
    // "prettier.useEditorConfig": false, // 默认值为false,即不使用默认的.editorconfig配置文件中定义的任何配置，所以以下设置才生效。(即，在未创建.prettierrc文件之前，使用以下几项配置)
    "prettier.trailingComma": "none", //禁止随时添加逗号 （需要安装vetur 是否末尾添加逗号的字段，但是设置无效 ）
    "prettier.singleQuote": false, // prettier 设置非单引号
    "prettier.semi": false, // 禁止随时添加分号
    "prettier.printWidth": 190, // 每行文字个数超出此限制将会被迫换行

    // --------------------  配置eslint  --------------------
    // 设置编辑器的默认格式化工具 如果以下各类文件不单独设置，则以默认为主，如果有单独设置，则覆盖此默认设置。
    // "editor.defaultFormatter": "Vue.volar", // 默认的代码格式化工具
    "editor.defaultFormatter": "esbenp.prettier-vscode",

    // 以下是默认所有文件都使用另一个格式化程序，将仅对Javascript使用Prettier。
    // "editor.defaultFormatter": "<默认所有文件都使用另一个格式化程序>"
    //   "[javascript]": {
    //     "editor.defaultFormatter": "esbenp.weather vscode"
    //   },

    // 不想自动格式化特定语言javascript，可以在保存时禁用其格式
    // "[javascript]": {
    // "editor.formatOnSave": false, // 关闭js的格式化
    // "editor.formatOnSave": true, // 开启js的格式化 默认是否开启的
    // },

    // 单独设置类型文件的格式化
    "[javascript]": {
        // "editor.formatOnSave": false, // 关闭js的格式化
        "editor.formatOnSave": true,
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[vue]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
        // "editor.defaultFormatter": "octref.vetur"
    },
    "[html]": {
        "editor.formatOnSave": true,
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[typescriptreact]": {
        "editor.formatOnSave": true,
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[javascriptreact]": {
        "editor.formatOnSave": true,
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[typescript]": {
        "editor.formatOnSave": true,
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[css]": {
        "editor.formatOnSave": true,
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[less]": {
        "editor.formatOnSave": true,
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[scss]": {
        "editor.formatOnSave": true,
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[json]": {
        "editor.formatOnSave": true,
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[jsonc]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    //方法括号之间插入空格
    // "javascript.format.insertSpaceBeforeFunctionParenthesis": false,

    // ======== vetur相关配置 ========
    "vetur.validation.template": false,
    "vetur.completion.scaffoldSnippetSources": {
        "workspace": "💼",
        "user": "🗒️",
        "vetur": "✌",
        "files.associations": {
            "*.vue": "html"
        }
    },
    "git.confirmSync": false,
    "fittencode.selection.showCodeLens": false,
    "workbench.editor.enablePreview": false
    // "vetur.format.defaultFormatterOptions": {
    //     "js-beautify-html": {
    //         // #vue组件中html代码格式化样式
    //         "wrap_attributes": "force-aligned", //也可以设置为“auto”，效果会不一样
    //         "wrap_line_length": 200,
    //         "end_with_newline": false,
    //         "semi": false,
    //         "singleQuote": true
    //     },

    //     "prettier": {
    //         "semi": false,
    //         "singleQuote": true,
    //         "no-tabs": "off"
    //     }
    // }
}

// 如何启用 useEditorConfig，你需要在你的Prettier配置文件中设置此选项为true。你可以在.prettierrc文件、package.json中的prettier字段，或者在你的IDE/编辑器的配置中直接设置
// 在.prettierrc文件中设置：
// {
//     "useEditorConfig": true
//   }
// 在package.json中设置：
// {
//     "prettier": {
//       "useEditorConfig": true
//     }
//   }
// .editorconfig文件通常位于项目的根目录下，用于定义编码风格。例如：
// root = true

// [*]
// indent_style = space
// indent_size = 2
// end_of_line = lf
// charset = utf-8
// trim_trailing_whitespace = true
// insert_final_newline = true
 
------------------------------------------------------------ setting.json 结束