# 打开配置文件

1.Code -> preferences(首选配置) -> setting(设置); 2.快捷键 command + ,;

配置模式界面就打开了，点击右上角红色区域按钮，就可以打开 setting.json 文件了。

# 编写配置文件

这块配置支持 html、css、js 等文件的格式化

# eslint 和 prettier

1.eslint 是用来做代码风格检查的，比较关注代码质量，并且会提示不符合风格规范的代码。除此之外 eslint 也具有一部分代码格式化的功能。这块配置长成这样

// 保存时格式化
"editor.formatOnSave": true,

// 设置 eslint 保存时自动修复
"eslint.autoFixOnSave": true

2.prettier 本身就是用来做代码格式化的，准确的说它是来美化代码的，所以这方面有更大的优势。同时 prettier 也是对 eslint 格式化的基础上的一个极好的补充。

那么两者都有格式化的功能，就不会有冲突吗？有，不过只要简单的配置就可以解决了，比如语句末尾不加分号和强制单引号等 eslint 风格检查

// prettier 设置语句末尾不加分号
"prettier.semi": false,

// prettier 设置强制单引号
"prettier.singleQuote": true,

# vue 文件

vscode 对 vue 支持也是很给力的，只需用 Vetur 插件，其配置直接用的 prettier 规范。这也是我们选择 prettier 格式化代码的另一个原因。

# 冲突

eslint 推荐 function () {}、prettier 则推荐function() {}，如果喜欢用第一种风格那什么都不应该，如果你和我一样喜欢第二种，需要设置 eslint.validate, 将自动修复功能注释，保证走 prettier 规范。如果项目中也设置了 eslint，还需要在 eslintrc.js 中配置，

// eslintrc.js
module.exports = {
  rules: {
    'space-before-function-paren': 0
  }
};

// setting.json
{
  "window.zoomLevel": 0,
  /** git **/
  "git.path": null,
  "git.autofetch": true,
  /** files **/
  // 标签自动补全
  "files.associations": {
    "*.vue": "vue",
    "*.wxss": "css",
    "*.wxml": "html",
    "*.ts": "javascript"
  },
  //
  // 控制何时自动保存已更新文件
  // 接受的值: "off"、"afterDelay"、"onFocusChange" (编辑器失去焦点)、"onWindowChange" (窗口失去焦点)
  // 如果设置为 "afterDelay"，可在 "files.autoSaveDelay" 中配置延迟时间
  "files.autoSave": "onFocusChange",
  /** editor **/
  "editor.fontFamily": "Menlo, Monaco, 'Courier New', monospace",
  "editor.fontSize": 12,
  "editor.lineHeight": 24,
  "editor.fontWeight": "500",
  // 代码缩进修改成 2 个空格
  "editor.tabSize": 2,
  // 100 列后换行
  "editor.wordWrap": "on",
  // "editor.wordWrapColumn": 100,
  // 保存时格式化
  "editor.formatOnSave": true,
  // 显示 markdown 中英文切换时产生的特殊字符
  "editor.renderControlCharacters": true,
  "editor.formatOnPaste": true,
  "editor.formatOnType": true,
  // 右侧小地图
  "editor.minimap.enabled": true,
  "editor.minimap.renderCharacters": false,
  "editor.minimap.maxColumn": 60,
  /** eslint and prettier **/
  // 使用 eslint 風格使用standard 進行代碼規則限制
  "eslint.autoFixOnSave": true,
  // eslint 检测文件类型，针对 vue 文件 和 html 文件
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "vue-html",
    {
      "language": "html",
      "autoFix": true
    },
    {
      "language": "vue",
      "autoFix": true
    },
    {
      "language": "js",
      "autoFix": true
    },
  ],
  /** prettier **/
  // prettier 设置语句末尾不加分号
  "prettier.semi": true,
  // prettier 设置强制单引号
  "prettier.singleQuote": true,
  /** 面包屑 **/
  // 开启 vscode 文件路径导航
  "breadcrumbs.enabled": true,
  // 启用后，按下 TAB 键，将展开 Emmet 缩写。
  "emmet.triggerExpansionOnTab": true,
  /** 主題 **/
  "workbench.colorTheme": "Monokai",
  // 左側工具欄是否可見
  "workbench.activityBar.visible": true,
  //自动保存信息
  // By default, create file  username
  "fileheader.Author": "芮正云 16396@etransfar.com",
  // By default, update file  username.
  "fileheader.LastModifiedBy": "芮正云 16396@etransfar.com",
  // By default, common template. Do not modify it!!!!!
  "fileheader.tpl": "/**\r\n * @创建码农: {author}\n * @创建日期: {createTime}\n * @最近更新: {lastModifiedBy}\n * @更新时间: {updateTime}\n * @文件描述: \n */\n",
  /** js **/
  // js設置單引號
  "javascript.preferences.quoteStyle": "single",
  // 让函数(名)和后面的括号之间加个空格
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  /** vue **/
  // 选择 vue 文件中 template 的格式化工具
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  // vetur 的自定义设置
  "vetur.format.defaultFormatterOptions": {
    "prettier": {
      "singleQuote": true,
      "semi": false
    }
  },
  /** stylus **/
  // 格式化stylus, 需安装Manta's Stylus Supremacy插件
  "stylusSupremacy.insertColons": false, // 是否插入冒号
  "stylusSupremacy.insertSemicolons": false, // 是否插入分好
  "stylusSupremacy.insertBraces": false, // 是否插入大括号
  "stylusSupremacy.insertNewLineAroundImports": false, // import之后是否换行
  "stylusSupremacy.insertNewLineAroundBlocks": false,
  "[markdown]": {
    "editor.defaultFormatter": "yzhang.markdown-all-in-one"
  } // 两个选择器中是否换行
}

← npm常用命令 git常用命令 →