vscode prettier配置_vscode快捷键+配置+插件+软件

记录下自己的开发环境

(1) 快捷键

Ctrl + p 搜索并跳转文件

Ctrl + f 文件内搜索

Ctrl + j 开关终端

Ctrl + d 选中光标内单词

Ctrl + shift + p 打开vscode命令栏

F12 转到定义

Ctrl + w 作用域内折叠 (需修改vscode按键绑定)

Ctrl + q 作用域内展开 (需修改vscode按键绑定)

(2) 配置

• vscode 基础设置

// setting.json
{
  "editor.fontSize": 18,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "files.autoSave": "afterDelay",
  "workbench.colorTheme": "One Dark Pro",
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "window.zoomLevel": 0,
  "editor.formatOnSave": true
}

• 配置vscode支持别名补全

// jsconfig.js
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

• 常用的snippets配置,scope 可以根据需要自行更改

{
  "pwd": {
    "prefix": "pwd",
    "body": ["// $TM_FILEPATH"],
    "description": "打印文件路径"
  },
  "common": {
    "prefix": "common",
    "body": ["/**", " * $0", " */"],
    "description": "多行注释"
  },
  "canvas": {
    "prefix": "canvas",
    "body": ["/** @type {HTMLCanvasElement} */ "],
    "description": "canvas补全类型声明"
  },
  "http": {
    "prefix": "http",
    "body": ["http://192.168.5.$0/"],
    "description": "http快速生成"
  },
  "https": {
    "prefix": "https",
    "body": ["https://192.168.5.$0/"],
    "description": "http快速生成"
  }
}

• 配置prettier格式化

// .prettierrc
{
  "semi": false,
  "singleQuote": true,
  "printWidth": 120,
  "jsxSingleQuote": true,
  "tabWidth": 2
}

(3) 插件

Bracket Pair Colorizer 括号高亮

One Dark Pro 主题

Prettier 格式化

Live Server

open in browser

ES7 React/Redux/GraphQL/React-Native snippets

- rfc 创建函数组件

- rcc 创建类组件

- imp→ import moduleName from 'module'

- imd→ import { destructuredModule } from 'module'

Vetur vue模板支持

(4)软件

Snipaste

- F1 截图

- F3 固定截图

- C 取色

网易有道词典

-划词设置双击 Ctrl 翻译