vscode

vscode 中的插件

• Chinese (Simplified) (简体中文) - 简体中文语言包

• Auto Rename Tag - 同步修改标签

• Auto Close Tag

• open in browser - 右键菜单，浏览器打开html文件

• Image preview - 鼠标悬停预览图片

• Prettier - Code formatter - 前端代码格式化

• ESLint - 前端代码格式化

• Easy LESS - 实时编译less到css

• Live Sass Compiler - 实时编译sass/scss到css

• sass - 写sass、scss必装的插件

• jQuery Code Snippets - jquery代码提示

• Live Server - 代码更新实时刷新web页面

• JavaScript (ES6) code snippets - es6等代码块，语法提示

• Project Manager

vscode 中的 setting.json 文件

可以在这里配置配合插件，个性化的代码格式

本地的地址：

• Windows - %APPDATA%\Code\User\settings.json(用户>64802>AppData>Roaming>Code>User)
• Mac - $HOME/Library/Application Support/Code/User/settings.json

自己的setting.json文件 （更新于2023-07-08 部分可以参考 代码风格配合插件 Prettier + ESLint 使用）

{
  // 不同语言保存时采用的格式化方式
  "[javascript]": {
    "editor.defaultFormatter": "vscode.typescript-language-features"
  },
  "[scss]": {
    "editor.defaultFormatter": "Wscats.eno"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "vscode.json-language-features"
  },
  "[html]": {
    "editor.defaultFormatter": "vscode.html-language-features"
  },
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[markdown]": {
    "editor.defaultFormatter": "DavidAnson.vscode-markdownlint"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[less]": {
    "editor.defaultFormatter": "Wscats.eno"
  },
  "[css]": {
    "editor.defaultFormatter": "Wscats.eno"
  },
  "markdownlint.config": {
    "default": true,
    "MD029": false,
    "MD033": false,
    "MD040": false
  },
  // vscode内置的配置
  // 每个文件显示的本地路径
  "window.title": "${dirty}${activeEditorLong}${separator}${rootName}${separator}${appName}",
  // 多层{ {} } 会给不同颜色的提示
  "editor.bracketPairColorization.enabled": true,
  "editor.guides.bracketPairs": "active",
  // 
  "editor.tabSize": 2,
  // 保存代码时，自动进行代码格式化
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  },
  // 行宽度 根据编辑器视图宽度自动换行
  // "editor.wrappingColumn": 0,
  // "prettier.configPath": "C:\\Users\\64802\\.prettierrc",
  // ================================= prettier 配置开始 =================================
  // 安装Prettier配置
  "eslint.alwaysShowStatus": true,
  // 函数后面不加逗号
  "prettier.trailingComma": "none",
  // 句尾是否加分号 true是加
  "prettier.semi": false,
  // 每行文字个数超出此限制将会被迫换行
  "prettier.printWidth": 300,
  // 使用单引号替换双引号
  "prettier.singleQuote": false,
  //  (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid：省略括号、always是加上
  "prettier.arrowParens": "avoid",
  // 大括号内的首尾需要空格
  "prettier.bracketSpacing": true,
  // 根据xxx决定 html 要不要折行,有人这里写css
  "prettier.htmlWhitespaceSensitivity": "ignore",
  // jsx 标签的反尖括号需要换行: 把'>' 单独放一行
  "prettier.bracketSameLine": false,
  // jsx 不使用单引号，而使用双引号
  "prettier.jsxSingleQuote": false,
  // ================================= prettier 配置结束 =================================
  // ================================= vetur插件 配置开始 =================================
  // 设置 .vue 文件中，HTML代码的格式化插件
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  // 忽略vscode中右下角的 一些找不到... 的弹窗
  "vetur.ignoreProjectWarning": true,
  // 使用 vetur格式化文件的时候 采用prettier规范,如果没有用上面prettier的公共规则
  "vetur.format.defaultFormatterOptions": {
    "prettier": {
      // 函数后面不加逗号，
      "trailingComma": "none",
      // 使用单引号
      "singleQuote": true,
      // 结尾不用分号
      "semi": false,
      "arrowParens": "avoid",
      "printWidth": 300
    },
    "js-beautify-html": {
      "wrap-line-length": 300,
      // 属性换行
      // "wrap_attributes": false
      "wrap_attributes": "auto",
      "wrap_attributes_mode": "auto",
      "wrapped_attributes_per_line": "multiple",
      "wrapped_attributes_indent": "auto",
      "wrapped_attributes_end": "auto"
    }
  },
  // :key 报错的情况
  "vetur.validation.template": false,
  "window.openFoldersInNewWindow": "on",
  "html.format.enable": false,
  "vscode-office.openOutline": true,
  "bracket-pair-colorizer-2.depreciation-notice": false,
  "prettier.useEditorConfig": false
  // ================================= vetur插件 配置结束 =================================
}