whorusq / vscode-settings

最新版本：v1.51

官网地址：https://code.visualstudio.com

效果预览：

⚠️ 注意：此预览图中的最终效果，基于图标主题 「Material Icon Theme」 和 颜色主题 「One Monokai Theme」 进行定制，详见下文中的自定义配置部分。

索引

1. 推荐自定义配置
2. 替代图标
3. 快捷键
4. 第三方插件
   • 4.1. 如何安装插件？
   • 4.2. 推荐插件及配置
5. 其它

1. 推荐自定义配置

点击这里

2. 替代图标

点击这里

3. 快捷键

点击这里

4. 第三方插件

4.1. 如何安装插件？

1. 搜索扩展
   • 方式一：⌘P 输入 ext install [紧跟插件名或关键字] 然后回车；
   • 方式二：左侧边栏单击扩展图标或使用快捷键 ⇧⌘X，然后在搜索框输入要安装的插件名称；
2. 根据搜索到的插件列表，查找需要的插件，点击 Install ；
3. 插件安装好之后，点击 Reload 重新加载，或完全关闭 vscode 重新打开。

4.2. 推荐插件及配置

以下是一些推荐的插件及基本配置，详细说明及配置项参见各插件对应的文档。

下面是一些插件的推荐设置：

Paste and Indent

1. 修改文件 keybindings.json，追加以下设置（ctrl+v 带格式；ctrl+shift+v 原样）

   [
       {
           "key": "cmd+v",
           "command": "pasteAndIndent.action",
           "when": "editorTextFocus && !editorReadonly"
       },
       {
           "key": "cmd+v",
           "command": "editor.action.clipboardPasteAction",
           "when": "!editorTextFocus"
       },
       {
           "key": "cmd+shift+v",
           "command": "editor.action.clipboardPasteAction",
           "when": "editorTextFocus && !editorReadonly"
       }
   ]

2. 修改用户配置 Preferences > Settings，追加如下设置

   "pasteAndIndent.selectAfter": true,

PHP IntelliSense

"php.executablePath": "/usr/bin/php",
"php.validate.run": "onType",
"php.suggest.basic": false,

Bracket Pair Colorizer

"editor.matchBrackets": false,
"bracketPairColorizer.highlightActiveScope": true,
"bracketPairColorizer.showBracketsInGutter": true,
"bracketPairColorizer.showVerticalScopeLine": false,
"bracketPairColorizer.activeScopeCSS": [
    "borderStyle : none",
    "backgroundColor : {color}; opacity: 0.5"
],

Insert Date String

// 插入日期时间 command + shift + i
//  DDDD, MMMM D, YYYY A HH:mm:ss -> Tuesday, April 3, 2018 PM 02:35:08
"insertDateString.format": "YYYY/MM/DD hh:mm:ss"

ESLint

1. 安装插件、重启；

2. 输入命令 npm install -g eslint 全局安装 eslint ；

3. 安装对应语言的规则，如 react 的

   npm install --save-dev eslint-config-alloy eslint-plugin-react babel-eslint
   

   其中：

   • eslint-config-alloy AlloyTeam 出的通用基础语法
   • eslint-plugin-react react 相关语法
   • babel-eslint es2015 语法

4. 在项目更目录下添加 .eslintrc.js 文件，并追加以下内容：

   module.exports = {
       extends: [
           'eslint-config-alloy/react',
       ],
       globals: {
           // 这里填入你的项目需要的全局变量
           // 这里值为 false 表示这个全局变量不允许被重新赋值，比如：
           //
           // React: false,
           // ReactDOM: false
       },
       rules: {
           // 这里填入你的项目需要的个性化配置，比如：
           //
           // // @fixable 一个缩进必须用两个空格替代
           // 'indent': [
           //     'error',
           //     2,
           //     {
           //         SwitchCase: 1,
           //         flatTernaryExpressions: true
           //     }
           // ],
           // // @fixable jsx 的 children 缩进必须为两个空格
           // 'react/jsx-indent': [
           //     'error',
           //     2
           // ],
           // // @fixable jsx 的 props 缩进必须为两个空格
           // 'react/jsx-indent-props': [
           //     'error',
           //     2
           // ]
       }
   };

5. 添加用户设置：

   "javascript.validate.enable" : false,
   "eslint.autoFixOnSave": true, // 保存时修复
   // "eslint.trace.server": "messages",// 输出 ESLint 执行时的 log，ESLint 不生效的时候可以启用看看
   "eslint.validate": [ // 配置检查的文件类型
       "javascript",
       "javascriptreact",
       "html"
   ],

说明：以上配置参照自 AlloyTeam ESLint 配置指南，更多内容请查看原文。

5. 其它

暂无