VSCode를 표준화된 방식으로 구성하는 방법은 무엇입니까? 코드 형식을 지정하는 방법은 무엇입니까?

VSCode표준 구성을 수행하는 방법은 무엇입니까? 코드 형식을 지정하는 방법은 무엇입니까? 다음 기사에서는 다양한 사양의 기본 구성을 소개하고 이러한 구성 사양을 사용하고 코드 형식을 지정하는 방법에 대해 설명합니다. 모든 사람에게 도움이 되기를 바랍니다.

이러한 구성 사양을 사용하여 코드 형식을 지정하세요

우리는 일상 업무에서 온갖 종류의 프로젝트를 접하게 됩니다. 프로젝트에서 사용하는 기술 아키텍처가 다른 경우 그에 상응하는 다른 코드 사양이 있을 수 있습니다. 사람마다 코딩 습관이 다르고 단시간에 바꾸기 어렵습니다. 이것이 바로 우리가 새로운 프로젝트를 개발할 때 다양한 표준 오류에 자주 직면하는 이유입니다. [추천 학습: "vscode tutorial"]

이때 구성 세트가 있으면 프로젝트 규칙을 고려하지 않고 코드를 작성할 수 있으므로 저장만 하면 자동으로 따라갈 수 있습니다. 현재 프로젝트에 구성된 규칙을 수정하면 의심할 여지없이 개발 경험과 효율성이 크게 향상됩니다.

아래에서는 이 목표를 달성하기 위해 해야 할 일과 다양한 사양의 기본 구성에 대해 자세히 설명하겠습니다.

EditorConfig

먼저 들여쓰기, 줄 바꿈 방법 등 기본 사양이 필요합니다. 모든 팀, 모든 언어, 모든 편집자에게 작동해야 합니다.

editorconfig가 이를 달성하는 데 도움이 될 수 있습니다. 모든 개발자가 기본 코딩 규칙을 준수하도록 유지합니다. editorconfig 能帮助我们实现这一点。它让所有的开发者在基本编码规范上保持一致。

我们需要做的是：

• 安装 EditorConfig 插件（有些编辑器默认支持 EditorConfig ，具体请看 这些编辑器不需要安装插件）。

• 配置 .editorconfig 文件。

以下是 .editorconfig 的用法和例子：

## 打开文件时，EditorConfig 插件会在打开的文件的目录和每个父目录中查找名为 .editorconfig 的文件。 
## 如果到达根文件路径或找到具有 root=true 的 EditorConfig 文件，将停止对 .editorconfig 文件的搜索。
## 如果 root=true 没有配置, EditorConfig 插件将会在工程之外寻找 .editorconfig 文件
root = true

## 使用规则匹配文件
## *            匹配任何字符串，路径分隔符 (/) 除外
## **           匹配任意字符串
## ?            匹配任何单个字符
## [name]       匹配给定的字符串中的任何单个字符
## [!name]      匹配不在给定字符串中的任何单个字符
## {s1,s2,s3}   匹配任意给定的字符串
## {num1..num2} 匹配num1和num2之间的任何整数，其中num1和num2可以是正数或负数
## 如规则[*.{js}]只对 .js 文件生效。一般来说，我们配置 [*] 对所有文件生效。
[*]

## 缩进方式。 值可以是 tab 或者 space
indent_style = space

## 缩进大小。当设置为 tab 时，会取 tab_width 的值。
indent_size = 2

## 通常不需要设置。当 indent_size = tab 时，才会生效。
tab_width = 2;

## 设置为 lf、cr 或 crlf 以控制如何表示换行符。
end_of_line = lf

## 设置为 latin1、utf-8、utf-8-bom、utf-16be 或 utf-16le 来控制字符集。
charset = utf-8

## 设置为 true 以删除换行符之前的任何空格字符，设置为 false 以确保不会。
trim_trailing_whitespace = true

## 设置为 true 以确保文件在保存时以换行符结束，设置为 false 以确保不以换行符结束。
inset_final_newline = true

Eslint

对于前端开发工程师来说，JavaScript 无疑是我们最好的伙伴了。而 ESLint，它是一款插件化的 JavaScript 代码静态检查工具，其核心是通过对代码解析得到的 AST（Abstract Syntax Tree，抽象语法树）进行模式匹配，定位不符合约定规范的代码。

社区里有很多不同版本的规范，每个团队也可能会制定自己的规范。编码风格千千万，而工程的配置就一套，在多人协作时就必然会出现规范报错的情况。我们需要配置一套规则，让我们不需要 Care 规则到底是什么，在保存文件的时候，自动按照工程规范格式化代码。

怎么办呢？

Eslint 提供了风格指南规则，并明确表示了哪些是可修复的：Stylistic Issues

我们需要做的是：

• 本地安装 Eslint 和社区推荐的规范 eslint-config-airbnb （也可以是别的规范）。插件会使用安装的 Eslint 库（如果你还未安装：npm i eslint eslint-config-airbnb）。

• VSCode 安装 Eslint插件。

• 添加 .eslintrc.js 配置文件。

• 更改 VSCode 的 setting.json 文件的配置。

其中，想要实现自动按照工程的规则格式化，第四步必不可少。

setting.json

如果你已经安装好了 Eslint插件，按 cmd + shif + p，打开 defaultSettings.json 文件，按 cmd + f 搜索 eslint 可以看到所有 ESlint 在 VSCode 内的默认配置。我们需要对它做一些修改。

还是按 cmd + shift + p 打开 settings.json 文件。这个文件是用户自定义配置，里面的配置会覆盖 defaultSettings.json 里的同名配置。我们在这个文件里对 ESLint插件 的配置做一些修改，让它达到我们想要的效果。

首先，我们想要 保存时自动格式化

🎜우리가 해야 할 일은: 🎜🎜

• 🎜 EditorConfig 플러그인을 설치하는 것입니다(일부 편집기는 EditorConfig는 기본적으로 입니다. 를 참조하세요. 이 편집기는 플러그를 설치할 필요가 없습니다. -인 🎜). 🎜
• 🎜 .editorconfig 파일을 구성하세요. 🎜

🎜다음은 .editorconfig의 사용법과 예입니다. 🎜

// 编辑的时候检测还是保存的时候检测，默认在编辑的时候就检测。 default: onType
// "eslint.run": "onType",

// default: false
// "eslint.format.enable": false,

// default: false
// "editor.formatOnSave": false,

"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true
},
"[vue]": {
  "editor.defaultFormatter": "dbaeumer.vscode-eslint"
},
"[javascript]": {
  "editor.defaultFormatter": "dbaeumer.vscode-eslint"
},

// 始终在VSCode的右下角状态栏显示 ESLint 字样，查看 ESLint 运行状态,确保 ESLint 在正常运行
"eslint.alwaysShowStatus": true,

🎜🎜🎜Eslint🎜🎜🎜🎜프런트 엔드 개발 엔지니어에게 JavaScript는 의심할 여지 없이 최고의 파트너입니다. . ESLint는 플러그인 JavaScript 코드 정적 검사 도구입니다. 핵심은 코드 구문 분석을 통해 얻은 AST(추상 구문 트리)에서 패턴 일치를 수행하여 합의된 사양을 충족하지 않는 코드를 찾는 것입니다. 🎜🎜커뮤니티에는 다양한 버전의 사양이 있으며 각 팀은 자체 사양을 개발할 수도 있습니다. 수천 가지 코딩 스타일이 있지만 프로젝트 구성은 하나뿐입니다. 여러 사람이 공동 작업을 하면 필연적으로 표준 오류가 발생합니다. Care 규칙이 무엇인지 알 필요가 없도록 일련의 규칙을 구성해야 합니다. 파일을 저장하면 엔지니어링 사양에 따라 코드 형식이 자동으로 지정됩니다. 🎜🎜무엇을 해야 할까요? 🎜🎜Eslint는 스타일 가이드 규칙을 제공하고 어떤 규칙이 수정 가능한지 명확하게 알려줍니다. 스타일 문제🎜🎜🎜🎜우리가 해야 할 일은: 🎜🎜

• 🎜Eslint의 로컬 설치 및 커뮤니티 권장 사양eslint-config-airbnb🎜(다른 사양일 수도 있음). 플러그인은 설치된 Eslint 라이브러리를 사용합니다(아직 설치하지 않은 경우: npm i eslint eslint-config-airbnb). 🎜
• 🎜VSCode는 Eslint 플러그인을 설치합니다. 🎜
• 🎜 .eslintrc.js 구성 파일을 추가하세요. 🎜
• 🎜VSCode의 setting.json 파일 구성을 변경하세요. 🎜

🎜그 중 프로젝트의 규칙에 따라 자동으로 포맷을 하고 싶다면 네 번째 단계는 필수입니다. 🎜🎜🎜setting.json🎜🎜🎜🎜 Eslint 플러그인을 설치한 경우 cmd + Shift + p, <code>defaultSettings.json 파일을 열고 cmd + f를 누르고 eslint를 검색하면 ESlint의 모든 기본 구성을 볼 수 있습니다. VSCode에서. 우리는 그것을 약간 수정해야 합니다. 🎜🎜또한 cmd + Shift + p를 눌러 settings.json 파일을 엽니다. 이 파일은 사용자 정의 구성이며, 내부 구성은 defaultSettings.json에 있는 동일한 이름의 구성을 덮어씁니다. 원하는 결과를 얻기 위해 이 파일의 ESLint 플러그인 구성을 일부 수정했습니다. 🎜🎜우선, 저장 시 자동으로 포맷하고 싶습니다. 이 효과를 얻으려면 세 가지 구성이 필요합니다. 🎜

• editor.formatOnSave  + eslint.format.enable。前者配置：保存时格式化，后者配置：将 ESlint 规则作为格式化标准。
• eslint.autoFixOnSave
• editor.codeActionsOnSave

其中，第二种 eslint.autoFixOnSave 已经被废弃。使用它会提示更改为 editor.codeActionsOnSave。

而第一种和第三种都可以实现，但是更推荐使用第三种 editor.codeActionsOnSave，它支持更高的可配置性。

使用  editor.codeActionsOnSave 的时候，我们需要禁用其它格式化程序，最好的做法是将 ESlint 设置为格式化程序默认值。并且当我们这么做的时候，我们可以关闭 editor.formatOnSave，否则我们的文件将被修复两次，这是没有必要的。

以下便是我们需要在 setting.json 里新增的配置。（注释的地方是默认配置，无需新增）

// 编辑的时候检测还是保存的时候检测，默认在编辑的时候就检测。 default: onType
// "eslint.run": "onType",

// default: false
// "eslint.format.enable": false,

// default: false
// "editor.formatOnSave": false,

"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true
},
"[vue]": {
  "editor.defaultFormatter": "dbaeumer.vscode-eslint"
},
"[javascript]": {
  "editor.defaultFormatter": "dbaeumer.vscode-eslint"
},

// 始终在VSCode的右下角状态栏显示 ESLint 字样，查看 ESLint 运行状态,确保 ESLint 在正常运行
"eslint.alwaysShowStatus": true,

.eslintrc.js

接下来，我们聊聊 .eslintrc.js 文件。这个文件将会规定我们的 ESLint 具体该使用什么规则去规范我们的代码。

我们自己往往不需要去配置这个文件，因为工程一般都会配置好了一套规则。我们只需要使用这套规则去格式化代码就好了。

但是看懂每条规则的意义，对于我们也是很重要的，例如你想自己新建工程。

接下来，我将从 普遍用法、Vue项目特殊配置、React项目特殊配置 来看下如何配置 .eslintrc.js 文件。

普遍用法

• 默认情况下，ESLint 支持 ES5 的语法。我们可以覆盖这个配置，启用对 ES6、 ES7 ...  的支持。

// 启用对 es6 的语法和全局变量的支持
{
  env: {
    es6: true,
  },
}

• 如果我们想让 ESLint 不仅能识别浏览器环境中的语法，其它环境(如 Node)我们也希望它能识别，这时候我们可以这样配置：

{
  env: {
    browser: true,
    node: true,
  },
}

• 在一些项目中，我们需要特殊的解析器去解析我们的代码，是否是符合规范的。这时候我们可以使用 Parser

{
  parser: 'babel-eslint',
}

• 当访问当前源文件内未定义的变量时，no-undef 规则将发出警告。如果你想在一个源文件里使用全局变量，推荐你在 ESLint 中定义这些全局变量，这样 ESLint 就不会发出警告了。

{
  globals: {
    "__DEV__": true,
    "If": true,
    "For": true,
    "POBrowser": true
  },
}

• ESLint 支持使用第三方插件。在使用插件之前，你必须使用 npm 安装它。在配置文件里配置插件时，可以使用 plugins 关键字来存放插件名字的列表。插件名称可以省略 eslint-plugin- 前缀。

{
  	plugins: ['react-hooks', 'jsx-control-statements'],
}

• ESLint 附带有大量的规则。你可以使用注释或配置文件修改你项目中要使用的规则。要改变一个规则设置，你必须将规则 ID 设置为下列值之一：
  • "off" 或 0 - 关闭规则
  • "warn" 或 1 - 开启规则，使用警告级别的错误：warn (不会导致程序退出)
  • "error" 或 2 - 开启规则，使用错误级别的错误：error (当被触发的时候，程序会退出)

{
    rules: {
        eqeqeq: 'off',
        curly: 'error',
        quotes: ['error', 'double']
    }
}

• 配置定义在插件中的一个规则的时候，你必须使用 插件名/规则ID 的形式。比如：

{
  plugins: ['react-hooks', 'jsx-control-statements'],
  rules: {
    'arrow-parens': 0,
    'react-hooks/rules-of-hooks': 'error',
    'react-hooks/exhaustive-deps': 'warn',
    'jsx-control-statements/jsx-use-if-tag': 0,
    'react/jsx-no-undef': ['error', { 'allowGlobals': true }],
    'no-prototype-builtins': 'off',
  }
}

• ESLint 的配置规则实在太多，如果我们自己一条条规则去配置，这个工作了将会非常大。我们可以直接拿现有的规范来使用。

{
  extends: 'zoo/react',
}

Vue 特殊配置

由于 Vue 单文件组件的特殊写法，针对 Vue 项目，需要做一些特殊的 ESLint 配置，以达到自动化的效果。

高亮语法支持

安装 Vetur插件。

使用 ESLint 而不是 Vetur 做代码检测

Vetur 为 Vue 项目带来了语法高亮和便捷的操作。但是它本身也会自动开启对 Vue 文件的代码检测。这往往会和我们配置的 ESLint 有冲突。为了避免这一点，需要在 VSCode 的 settings.json 中做一些配置：

// 不允许它格式化代码
"vetur.format.enable": false,
// 不允许它做代码检测
"vetur.validation.template": false,
"vetur.validation.script": false,
"vetur.validation.style": false,

无需将 vue 添加进 eslint.validate,因为 eslint.probe 默认会检测 vue 类型文件。

然后，我们需要配置 .eslintrc.js 文件，里面用到的插件都需要本地安装。

module.exports = {
    root: true,
    // 如果是SSR项目，则需要配置node:true
    env: {
        browser: true,
        node: true,
    },
    // 为什么是这样的parser配置？https://eslint.vuejs.org/user-guide/#how-to-use-a-custom-parser
    parser: 'vue-eslint-parser',
    parserOptions: {
        parser: 'babel-eslint',
    },
    extends: [
        // 如果是nuxt.js的脚手架项目，则需要安装对应的插件并做以下配置
        '@nuxtjs',
        'plugin:nuxt/recommended',

        // 让eslint可以规范vue文件
        'plugin:vue/base',
        // vue3的项目需要使用，如果是vue2项目，使用 plugin:vue/recommended
        'plugin:vue/vue3-recommended',
    ],
    plugins: [
        // 注意这里不能配置 html 选项，为什么？https://eslint.vuejs.org/user-guide/#why-doesn-t-it-work-on-vue-files
        'vue',
    ],
    // 配置自己的规则，覆盖上面继承的规则
    rules: {
        // 配置js的缩进为 2，switch case 语句的 case 也使用2个空格缩进
        indent: ['error', 2, { SwitchCase: 1 }],
        // 使用 eslint 检测 template里的代码，这里我配置 2 个空格缩进
        'vue/html-indent': ['error', 2],
    },
};

以上配置，大家根据自己的项目特点，自行删减即可。比如，如果你的项目不是 nuxt.js 的，可以去掉 extends 里的 '@nuxtjs 和 plugin:nuxt/recommended。

如果是 Vue cli 创建的项目，并且没有使用 ts，需要在项目根目录添加 jsconfig.json 文件。有关 jsconfig 的配置在这里：jsconfig

React 特殊配置

React 项目中，因为是 .js 文件，一般不需要特殊的配置。但即使如此，针对 JSX 和 Hooks 的使用规则，我们仍然需要做一些事情

针对 React Hooks

lint 规则具体强制了哪些内容？

eslint-plugin-hooks 是 React 源码目录 packages 里提供的一个包。它会强制执行 Hooks 规则，它也是 Hooks API 的一部分。

npm i eslint-plugin-reack-hooks

在 .eslintrc.js 中

module.exports = {
  // eslint-plugin 可以简写
  plugins: ['react-hooks'],
}

针对 JSX

JSX 不过只是 React 的一个语法糖，其最终都会被 React 调用 React.createElement 编译城 React Element 形式。所以在 17 版本之前，如果我们使用到了 JSX 但是没有引入 React ，会提示 'React' must be in scope when using JSX。 而在 17 版本之后， React 与 babel 和 TypeScript 编译器合作，将转化任务交给了编译器自动转化。

如果我们是之前的转化版本，我们要获得对 JSX 的语法支持，我们需要安装 eslint-plugin-react,它内置了对 JSX 的代码规范检测。

{
  extends: ['plugin:react/recommended'],
}

如果不想使用内置的规则，我们也可以自定义规则

{
  plugins: ['react'],
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
  },
  rules: {
    'react/jsx-no-undef': ['error', { "allowGlobals": true }],
  },
}

如果是新的转化版本，则需要做一点小小的更改,以便在使用 JSX 的时候，不会要求我们引入 React。

{
  extends: ['plugin:react/recommended', 'plugin:react/jsx-runtime'],
}

StyleLint

在完成了以上的配置之后，我们已经可以对 .js 文件、.vue 文件的 template 和 script 模块实现代码规范和保存时自动格式化了。但是对于 .css、.less、.scss 文件和 .vue 文件的 style 模块，我们还需要做额外的配置，否则样式部分不规范，我们也是没法检测并自动修复的。

我们需要做的是：

• npm i stylelint stylelint-config-standard stylelint-scss。

• 安装 Stylelint插件。

• 配置 .stylelintrc  文件。

• 配置 VSCode 的 setting.json 文件。

其中，第四步也是必须的，我们需要做如下配置：

// 防止编辑器内置的 [css] [less] [scss] 校验和此扩展 [stylelint] 报告相同的错误
"css.validate": false,
"less.validate": false,
"scss.validate": false,

// 保存时使用 eslint 和 stylelint 进行修复
"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true,
  "source.fixAll.stylelint": true
},
// 默认会对很多文件进行检测，这是不必要的，我们只让他检测样式
"stylelint.validate": [
		"css",
		"html",
		"less",
		"postcss",
		"sass",
		"scss",
		"source.css.styled",
		"styled-css",
	],

以上，我们的目标已经达成啦！

Prettier

代码格式化工具。很多同学都接触过这个工具，我个人深入了解了一下这个工具，以下是我的个人见解。先看下 Prettier 官方的一段话吧。

So why choose the “Prettier style guide” over any other random style guide? Because Prettier is the only “style guide” that is fully automatic. Even if Prettier does not format all code 100% the way you’d like, it’s worth the “sacrifice” given the unique benefits of Prettier, don’t you think?

可以看到，这个工具旨在让不同公司不同团队不需要考虑代码规范，实现自动化保存格式化。牺牲掉个性化内容。

但是往往不同的团队对规则的使用是不一致的，如果强制所有文件都使用 prettier 自动格式化，会出现与公司配置的代码规范检查工具（例如 ESLint） 冲突的情况。实际表现为自动保存之后，依然出现 ESLint 格式报错。

想让 prettier 生效，需要我们在 VSCode 里配置：

// 所有文件都使用 prettier 格式化
"editor.defaultFormatter": "esbenp.prettier-vscode",

// 只对 js 文件使用 prettier
"[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
 }

// 所有文件都不指定自动格式化方式
"editor.defaultFormatter": null,

// js文件不指定自动格式化方式
"[javascript]": {
    "editor.defaultFormatter": null
 }

可以使用 .prettierrc 文件、VSCode 的 setting.json 、.editorConfig 来配置 prettier。

推荐不常使用的文件类型，使用 prettier 去格式化。js,json,jsx,html,css,less,vue 等这些文件，使用工程统一的规范去格式化。

所以，我觉得完全可以卸载它。不知道你怎么看呢？

以上就是全部内容了，希望对你有所帮助～

更多编程相关知识，请访问：编程入门！！

위 내용은 VSCode를 표준화된 방식으로 구성하는 방법은 무엇입니까? 코드 형식을 지정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!