vscode-settings: A repository from UserHuRu

最新版本：v1.23

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

效果预览：

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

4. 第三方插件

4.1. 如何安装插件？

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

4.2. 推荐插件及配置

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

Paste and Indent 带格式的粘贴
Alignment 代码对齐格式化，同 sublime text 3
Docker Docker 相关文件高亮、语法检查、一些命令行工具等
Git History Git 功能增加，查看日志、文件历史、提交比较等
PHP IntelliSense PHP 语法检查、提示加强等
PHP Debug PHP 断点调试
PHP DocBlocker PHP 快速注释工具
Bracket Pair Colorizer 括号高亮
Insert Date String 插入日期时间
ESLint js 语法检查
JavaScript (ES6) snippets ES6 代码片段快捷提示
Log File Highlighter 日志文件高亮
Output Colorizer 在 Output 面板高亮日志输出
Markdown Preview Github Styles Markdown 预览窗口使用 Github 的样式
SVN 追加 SVN 的一些操作
...

Paste and Indent

修改文件 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"
    }
]

修改用户配置 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

安装插件、重启；
输入命令 npm install -g eslint 全局安装 eslint ；
安装对应语言的规则，如 react 的
```
npm install --save-dev eslint-config-alloy eslint-plugin-react babel-eslint
```
其中：
- eslint-config-alloy AlloyTeam 出的通用基础语法
- eslint-plugin-react react 相关语法
- babel-eslint es2015 语法

在项目更目录下添加 .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
        // ]
    }
};

添加用户设置：

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

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

UserHuRu/vscode-settings

索引

1. 推荐自定义配置

2. 替代图标

3. 快捷键

4. 第三方插件

4.1. 如何安装插件？

4.2. 推荐插件及配置

Paste and Indent

PHP IntelliSense

Bracket Pair Colorizer

Insert Date String

ESLint

5. 其它