Visual Studio Code（vscode）

使用Visual Studio Code（vscode）做前端开发，我的常用配置。

环境：
系统：macOS 13.1
vscode：1.75.1

Command Line Interface (CLI)

安装`code`命令

使用快捷键shift+command+p打开命令面板，输入shell筛选到安装命令，选择安装。之后可以在终端使用code命令。

快捷键

keyboard-shortcuts-macos.pdf (visualstudio.com)

设置

Code > 首选项 > 设置

一个制表符等于的空格数

常用设置 > Editor:Tab Size
调整为2

控制折行的方式

常用设置 > Editor:Word Wrap
调整为on，代码将根据编辑器窗口自动折行

在保存时格式化文件

文本编辑器 > 格式化 > Editor:Format On Save
勾选上

插件

中文（简体）语言包

Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code - Visual Studio Marketplace

EditorConfig for VS Code

EditorConfig for VS Code - Visual Studio Marketplace

EditorConfig为不同编辑器和IDE在同一项目中工作的多个开发人员维护一致的编码样式。更多配置

我的.editorconfig文件配置：

root = true

# 所有文件
[*]
# 缩进样式 空格
indent_style = space
# 缩进大小 2个空格
indent_size = 2
# 单个制表符宽度 2个空格
tab_width = 2
# 行结束符 lf
# Dos和Windows采用回车+换行（CR+LF）表示下一行
# 而UNIX/Linux采用换行符（LF）表示下一行
# 苹果机(MAC OS系统)则采用回车符（CR）表示下一行
end_of_line = lf
# 字符集 utf-8
charset = utf-8
# 是否从行尾删除空格
trim_trailing_whitespace = true
# 文件是否应以换行符结尾
insert_final_newline = true

# 针对md文件
[*.md]
trim_trailing_whitespace = false

ESLint

ESLint - Visual Studio Marketplace

ESLint 静态分析您的代码以快速查找问题。它内置于大多数文本编辑器中，您可以将 ESLint 作为持续集成管道的一部分运行

npm安装的ESLint包是用于检测代码是否符合规则的，VSCode的ESLint插件是用于和npm包配合标红问题代码的位置。

我的.eslintrc.js文件配置：

module.exports = {
  extends: [
     'eslint-config-ali/vue', 'prettier', 'prettier/vue'
  ]
}

我的.eslintignore文件配置：

dist/
node_modules/

Stylelint

Stylelint - Visual Studio Marketplace

Stylelint一个强大的 CSS linter，可帮助您避免错误并强制实施约定。

我的.stylelintrc.js文件配置：

module.exports = {
  extends: 'stylelint-config-ali',
};

我的.stylelintignore文件配置：

dist/
node_modules/

markdownlint

markdownlint - Visual Studio Marketplace

Prettier

Prettier - Code formatter - Visual Studio Marketplace

Prettier是一个强大的代码格式化程序

我的.prettierrc.js文件配置：

module.exports = {
  // 单行最大字数
  printWidth: 100,
  // tab 占用几个空格
  tabWidth: 2,
  // 行尾是否有分号
  semi: false,
  // 是否使用单引号
  singleQuote: true,
  // 尾随逗号
  trailingComma: 'all',
  // 箭头函数括号
  arrowParens: 'avoid',
};