VS Code 学习心得

之前一直用的是Sublime和WebStorm，因为换工作，新的团队都是用VS Code(Visual Studio Code)
为了统一代码风格和更好的沟通，所以自己也开始使用VS Code

1.快捷键(Mac)

整行复制：shift + alt + 上箭头或者下箭头
整行删除：shift + cmd + k
整行移动：alt + 上箭头或者下箭头
复制多个相同词：cmd + d
折叠整块代码：alt + cmd + [
展开整块代码：alt + cmd + ]
格式化代码：shift + alt + f
光标到头部：cmd + 左箭头
光标到尾部：cmd + 右箭头

2.插件

(1) Auto Close Tag 自动闭合HTML/XML标签
(2) Auto Rename Tag 自动完成另一侧标签的同步修改
(3) Beautify 格式化代码，值得注意的是，beautify插件支持自定义格式化代码规则，例如：

{
  "indent_size": 4,
  "indent_char": " ",
  "css": {
    "indent_size": 2
  }
}

(4) Bracket Pair Colorizer 给括号加上不同的颜色，便于区分不同的区块，使用者可以定义不同括号类型和不同颜色
(5) Debugger for Chrome 映射vscode上的断点到chrome上，方便调试
(6) ESLint js语法纠错，可以自定义配置，不过配置较为复杂，建议使用网上一些广泛使用的eslint配置
(7) GitLens 方便查看git日志，git重度使用者必备
(8) HTML CSS Support 智能提示CSS类名以及id
(9) HTML Snippets 智能提示HTML标签，以及标签含义
(10) JavaScript(ES6) code snippets ES6语法智能提示，以及快速输入，不仅仅支持.js，还支持.ts，.jsx，.tsx，.html，.vue，省去了配置其支持各种包含js代码文件的时间
(11) jQuery Code Snippets jQuery代码智能提示
(12) Markdown Preview Enhanced 实时预览markdown，markdown使用者必备
(13) markdownlint markdown语法纠错
(14) Material Icon Theme 个人认为最好的vscode图标主题，支持更换不同色系的图标，值得点出的是，该插件更新极其频繁，基本和vscode更新频率保持一致
(15) open in browser vscode不像IDE一样能够直接在浏览器中打开html，而该插件支持快捷键与鼠标右键快速在浏览器中打开html文件，支持自定义打开指定的浏览器，包括：Firefox，Chrome，Opera，IE以及Safari
(16) Path Intellisense 自动提示文件路径，支持各种快速引入文件
(17)React/Redux/react-router Snippets React/Redux/react-router语法智能提示
(18) Vetur Vue多功能集成插件，包括：语法高亮，智能提示，emmet，错误提示，格式化，自动补全，debugger。vscode官方钦定Vue插件，Vue开发者必备。

推荐 vscode插件拓展

3.设置中文

安装插件：Chinese (Simplified) Language Pack
安装完插件后，开始设置，调出设置面板快捷键：cmd+shift+p

"locale": "zh-cn" //将en 改为 zh-cn

图

4.vue开发 vue-cli 脚手架保存自动按照eslint格式保存

1).vscode插件设置

eslint插件安装
vetur插件安装

2).package.json中已经安装了
因为是通过vue脚手架（vue-cli）安装的,所以依赖包肯定安装了这些了

    "eslint": "^4.15.0",
    "eslint-config-standard": "^10.2.1",
    "eslint-friendly-formatter": "^3.0.0",
    "eslint-loader": "^1.7.1",
    "eslint-plugin-import": "^2.7.0",
    "eslint-plugin-node": "^5.2.0",
    "eslint-plugin-promise": "^3.4.0",
    "eslint-plugin-standard": "^3.0.1",
    "eslint-plugin-vue": "^4.0.0",

3). .editorconfig 配置

root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

4). .eslintignore 不校验这些文件

/build/
/config/
/dist/
/*.js

5). .eslintrc.js

// https://eslint.org/docs/user-guide/configuring

module.exports = {
  root: true,
  parserOptions: {
    parser: 'babel-eslint'
  },
  env: {
    browser: true,
  },
  extends: [
    // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
    // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
    'plugin:vue/essential', 
    // https://github.com/standard/standard/blob/master/docs/RULES-en.md
    'standard'
  ],
  // required to lint *.vue files
  plugins: [
    'vue'
  ],
  // add your custom rules here
  rules: {
    // allow async-await
    'generator-star-spacing': 'off',
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
  }
}

6).设置vscode 编辑器 code --> 首选项 ---> 设置

设置setting.json

编辑setting.json

   "eslint.autoFixOnSave": true,
   "eslint.validate": [
           "javascript",{
                   "language": "vue",
                   "autoFix": true
           },"html",
           "vue"
   ]

注意：1)和6)比较重要，其他几步都是脚手架自动帮忙生成的

1.快捷键(Mac)

2.插件

3.设置中文

4.vue开发 vue-cli 脚手架保存自动按照eslint格式保存

猜你喜欢