文章前言

永远把别人对你的批评记在心里，别人的表扬，就把它忘了。Hello 大家好～！我是南宫墨言QAQ

本文主要是记录在VS Code开发过程中一些关于规划化工具的使用，特地记录下与诸位分享，文中如果有阐述的不对的地方，希望大家在评论区指出讨论，谢谢

观看到文章最后的话，如果觉得不错，可以点个关注或者点个赞哦！感谢～❤️

文章主体

感谢各位观者的耐心观看，规范化工具k使用正片即将开始，且听南宫墨言QAQ娓娓道来

俗话说：工欲善其事，必先利其器。把开发工具弄好，对我们开发来说能达到事半功倍，也规避了很多错误等

本文阐述的内容基本上都是在项目的基础上配置的，这样子即使别人拉了你的代码，或者你在另外一台电脑，这些配置依然有效，但是弊端就是你可以新建项目的时候需要将这些配置重新引入。万事都有利弊，看你们自己的取舍了，哈哈

配置信息汇总

我喜欢把我弄成的时候的有关配置啥的先贴上来，有的人可能不想听我废话，想先来配置试一下效果，哈哈

package.json 中 devDependencies 里关于插件的版本

json 复制代码

"eslint": "^8.19.0",
"eslint-plugin-prettier": "5.0.0",
"prettier": "3.0.0",

settings.json（这个是指项目.vscode/settings.json）

json 复制代码

{
  // 编辑器设置
  /* 配置 Tab 空格数 */
  "editor.tabSize": 2,
  /* 字体大小 */
  "editor.fontSize": 16,
  /* 文字行高 */
  "editor.lineHeight": 0,
  // "editor.defaultFormatter": "esbenp.prettier-vscode",

  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  // window
  /* 调整窗口的缩放级别 */
  "window.zoomLevel": 0,

  // 工作区编辑设置
  /* 标签格式 short：显示文件名及其目录名*/
  "workbench.editor.labelFormat": "short",
  /* 是否显示为预览编辑器 */
  "workbench.editor.enablePreview": false,
  /* 工作台中使用的颜色主题 */
  "workbench.colorTheme": "Atom One Dark",

  // 终端设置
  /* 字体大小 */
  "terminal.integrated.fontSize": 15,

  // git设置
  /* 自动获取 */
  "git.autofetch": true,
  /* 同步 Git 存储库之前确认 */
  "git.confirmSync": false,
  /* 当没有staged段更改时，提交所有更改 */
  "git.enableSmartCommit": true,
  

  // typescript设置
  // "[typescript]": {
  //   /* 优先使用*/
  //   "editor.defaultFormatter": "esbenp.prettier-vscode"
  // },
  /* 函数名称后面加空格*/
  "typescript.format.insertSpaceBeforeFunctionParenthesis": true,
  "typescript.format.insertSpaceAfterFunctionKeywordForAnonymousFunctions": true,

  // javascript设置
  // "[javascript]": {
  //   "editor.defaultFormatter": "esbenp.prettier-vscode"
  // },
  /* 函数名称后面加空格*/
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  "javascript.format.insertSpaceAfterFunctionKeywordForAnonymousFunctions": true,

  // json设置
  // "[json]": {
  //   "editor.defaultFormatter": "esbenp.prettier-vscode"
  // },

  // other
  /* 设置文件图标 */
  "workbench.iconTheme": "material-icon-theme",
}

.prettierrc.js

php 复制代码

module.exports = {
  /** 一行最多 120 字符 */
  printWidth: 120,
  /** 使用 2 个空格缩进 */
  tabWidth: 2,
  /** 不使用 tab 缩进，而使用空格 */
  useTabs: false,
  /** 行尾需要有分号 */
  semi: true,
  /** 使用单引号代替双引号 */
  singleQuote: true,
  /** 对象的 key 仅在必要时用引号 */
  quoteProps: 'as-needed',
  /** jsx 不使用单引号，而使用双引号 */
  jsxSingleQuote: false,
  /** 末尾使用逗号 */
  trailingComma: 'all',
  /** 大括号内的首尾需要空格 { foo: bar } */
  bracketSpacing: true,
  /** 箭头函数，只有一个参数的时候，也需要括号 */
  arrowParens: 'always',
  /** 每个文件格式化的范围是文件的全部内容 */
  rangeStart: 0,
  rangeEnd: Infinity,
  /** 不需要写文件开头的 @prettier */
  requirePragma: false,
  /** 不需要自动在文件开头插入 @prettier */
  insertPragma: false,
  /** 使用默认的折行标准 */
  proseWrap: 'preserve',
  /** 根据显示样式决定 html 要不要折行 */
  htmlWhitespaceSensitivity: 'css',
  /** 换行符使用 lf */
  endOfLine: 'lf',
};

.eslintrc.js

java 复制代码

module.exports = {
  root: true,
  plugins: ['prettier'], // prettier 一定要是最后一个，才能确保覆盖
  rules: {
    'prettier/prettier': 'error',
  },
  extends: ['@react-native', 'plugin:prettier/recommended'],
};

贴完配置信息，后面将要说下插件的使用了

Prettier

问题

每位开发者对代码书写风格的理解或多或少有所差异，有的人认为需要在末尾加分号，有的人认为基于JS引擎的识别能力根本没有必要加分好。这只是其中一个例子，实际开发中还会存在各种各样代码风格问题，为了停止这场争论，急需一个统一代码风格的工具
是什么

Prettier 是一个固执己见的代码格式化程序，是一种严格规范的代码风格工具，主张尽量降低可配置性，严格规定组织代码的方式。它的出现就是为了统一代码风格，停止这场无休止的争论

Prettier 通过语法分析将代码解析为 AST 树，在 AST 树上应用代码风格规范重新生成代码

Prettier 根据文件路径自动推断解析器（.js 文件使用 babel 解析器、.css 文件使用 css 解析器），对代码进行解析。对不同类型文件的识别和解析受限于 Prettier 的内部支持，因此 Prettier 并非覆盖所有类型的文件，如下图所示，支持前端主流开发语言，足够应对日常开发。

U

首先我要先安装插件 Prettier - Code formatter

其次打开项目根目录下的 .prettierrc.js（没有的话就新建），并在文件内填充以下内容

php 复制代码

module.exports = {
  /** 一行最多 120 字符 */
  printWidth: 120,
  /** 使用 2 个空格缩进 */
  tabWidth: 2,
  /** 不使用 tab 缩进，而使用空格 */
  useTabs: false,
  /** 行尾需要有分号 */
  semi: true,
  /** 使用单引号代替双引号 */
  singleQuote: true,
  /** 对象的 key 仅在必要时用引号 */
  quoteProps: 'as-needed',
  /** jsx 不使用单引号，而使用双引号 */
  jsxSingleQuote: false,
  /** 末尾使用逗号 */
  trailingComma: 'all',
  /** 大括号内的首尾需要空格 { foo: bar } */
  bracketSpacing: true,
  /** 箭头函数，只有一个参数的时候，也需要括号 */
  arrowParens: 'always',
  /** 每个文件格式化的范围是文件的全部内容 */
  rangeStart: 0,
  rangeEnd: Infinity,
  /** 不需要写文件开头的 @prettier */
  requirePragma: false,
  /** 不需要自动在文件开头插入 @prettier */
  insertPragma: false,
  /** 使用默认的折行标准 */
  proseWrap: 'preserve',
  /** 根据显示样式决定 html 要不要折行 */
  htmlWhitespaceSensitivity: 'css',
  /** 换行符使用 lf */
  endOfLine: 'lf',
};