【工程化】个人习惯的vscode开箱配置，例如快捷打开、用户片段、settings.json配置等等

前言

win和mac明显不一样的地方会分开记录，如果差不多mac照着win的操作也是一样的

---

快捷操作

终端文件夹位置打开vscode

win

通过powershell，进入到含有项目的父文件夹的位置，输入code 打开软件，或者输入 code ./ 项目名称，打开项目文件（这种方法需要先在环境变量path里设置好路径D:\software\Microsoft VS Code\bin）

好像按照下面的mac方法也可以

git终端中可以直接打 .code 快速打开。

cmder终端中可以直接打 code . 快速打开

mac

打开VSCode –> 快捷键command+shift+p –> 输入shell command –> 点击提示Shell Command: Install ‘code’ command in PATH运行。

完成！在文件夹终端中直接code .即可打开。

---

切换命令行工具

Ctrl+shfit+p打开命令面板，点击这个选择命令行工具

然后就会弹出系统已有的命令行工具，选择一个就好，接下来就可以使用该项目的命令行了。

Ctrl+~ 快速打开命令行

---

按住ctrl+鼠标滚轮来放大缩小字体

直接在设置里搜索：mouse wheel zoom ，打勾即可。

---

保存格式化

开启prettier的保存自动化：

---

快速在空白.html创建dom树

!+回车

---

右键文件夹打开

window版参考：超简单设置右键打开 vscode的方法

---

其他快捷键：

---

插件

其实插件可以不用一下子全部下完，可以先下个中文补丁，然后后面打开项目的时候vscode会帮你检测，然后推荐你下载哪些插件。

Ch
简体中文

Auto Rename Tag
自动重命名标签，例如用来修改标签时，后面标签也能实时修改

Auto Close Tag
自动闭合HTML标签

Atom One Dark Theme
改个黑暗主题

vscode-icons
好看的文件图标

gitignore（非0.6.0版本）
Git文件管理，只需要对要放入.gitignore的文件右键放入即可。

Gitlens
自动识别代码是谁修改的。

import cost
显示import文件的大小信息 。

Auto Import
写第三方标签时，自动按需引入。

paste Image
快速将图片添加进Markdown，按着ctrl+alt+v快速把图片粘贴进markdown。

project Manager
项目管理工具 。
在开发一个项目的时候，通过Ctrl+shfit+p打开命令面板，把项目添加进项目管理文件夹里，下车再开发另一个项目的时候，就可以通过项目管理文件快速调出上一个项目进行查看。

Live Server
右键运行代码，以http协议，服务器的形式打开 。
特别是做移动端开发的时候，真机调试需要用到。

Code Runner
右键运行代码（run code）这样就不用每次运行代码都需要在终端输入node 文件名 用浏览器打开html文件 open in browser。右键运行，这种是通过file协议的方式打开的，所以打开的网页地址是绝对文件地址。

Document This
自动注释 按两次ctrl+alt+d。

Language PL/SQL
支持sql语句。

Eslint
lintter中的一种，自动标出格式错误，代码规范。

Prettier
formatter中的一种，与Eslint有功能上的重叠，Eslint更专注代码校验，Prettier更专注于格式美化，两者同时开启后需要做一些配置防止格式冲突。二者配置的方式可以分别单文件配置或者一起在package.json中配置。

提示：Prettier推荐开启自动逗号填充（大神说开启这个git对比的时候不会多对比一行），Eslint推荐开启强烈推荐模式。

Vetur
语法高亮，标签补全，模板快速生成，代码片段，指令补全，lint检查，格式化等。
安装完后还需要配置一下设置，配置文件在外面。

Vue-help
点击html的方法能够自动跳转到method中。

KoroFileHeader
文件注释加函数注释，具体使用方法看https://www.cnblogs.com/suRimn/p/10450372.html

vscode-debug-visualizer
debug关系图

Code Spell Checker
检测单词是否拼写错误的，对应特定单词还提示了拼写错误，可以对单词右键

TODO Highlights
用于注释高亮。例如todo，会给你在编辑器里高亮，容易让人看到

react相关：

ES7+ React/Redux/React-Native snippets
代码片段生成，rcc类式模板，rfc函数模板、rpc纯类式组件模板。不过建议自己写用户片段。

---

代码片段设置

文件----首选项----用户片段------新建

或者直接左下角选择小齿轮，点击用户代码片段

vue3、tsx、script setup的：

{
  "Print to console": {
    "prefix": "vue3",
    "body": [
      "<!-- $0 -->",
      "<template>",
      "  <div></div>",
      "</template>",
      "",
      "<script lang='ts'>",
      "import { defineComponent } from 'vue'",
      "export default defineComponent ({",
      "    name: '$TM_FILENAME_BASE',",
      "    setup() {",
      "       return {",
      "       }",
      "",
      "      }",
      "  });",
      "</script>",
      "<style scoped>",
      "</style>"
    ],
    "description": "vue3+ts"
  },
  "vuetsx": {
    "prefix": "vuetsx",
    "body": [
      "/* $0  */",
      "import { defineComponent } from 'vue'",
      "",
      "export default defineComponent ({",
      "    name: '$TM_FILENAME_BASE',",
      "    setup(props, {slots, emit, attrs}) {",
      "       return () =>{",
      "         return (",
      "             <div></div>",
      "         )",
      "       }",
      "      }",
      "  });"
    ],
    "description": "vuetsx"
  },
  "vue3 script setup": {
    "prefix": "ss",
    "body": [
      "<!-- $0 -->",
      "<template>",
      "  <div class=\"\"></div>",
      "</template>",
      "",
      "<script setup>",
      "import {} from 'vue'",
      "</script>",
      "",
      "<style lang=\"scss\" scoped></style>"
    ],
    "description": "vue3 script setup"
  },
  "vue2": {
        "prefix": "vue2",
        "body": [
            "<!-- $0 -->",
            "<template>",
            "  <div></div>",
            "</template>",
            "",
            "<script>",
            "export default ({",
            "    name: '$TM_FILENAME_BASE',",
            "    data() {",
            "       return {",
            "",
            "       }",
            "      }",
            "  });",
            "</script>",
            "<style lang='scss' scoped>",
            "</style>"
        ],
        "description": "vue2+js"
    },
    "react-rcc": {
        "prefix": "rcc",
        "body": [
            "/* $0 */",
            "import React, { Component } from 'react'",
            "",
            "export default class $TM_FILENAME_BASE extends Component {",
            "  constructor(props) {",
            "    super(props)",
            "    this.state = {}",
            "  }",
            "  render() {",
            "    let {} = this.state",
            "    let {} = this.props",
            "    return (",
            "      <div>App</div>",
            "    )",
            "  }",
            "}"
        ],
    },
    "react-rfc": {
        "prefix": "rfc",
        "body": [
		  "/* $0 */",
		  "import React, { useImperativeHandle, forwardRef } from 'react'",
		  "",
		  "const $TM_FILENAME_BASE = forwardRef((props, ref) => {",
		  "  // 只暴露部分方法",
		  "  useImperativeHandle(ref, () => ({}))",
		  "",
		  "  return (",
		  "    <div>App</div>",
		  "  )",
		  "})",
		  "",
		  "$TM_FILENAME_BASE.displayName = '$TM_FILENAME_BASE'",
		  "export default $TM_FILENAME_BASE"
		],
    },
    "react-rfc-ts": {
      "prefix": "rfc-ts",
      "body": [
          "/* $0 */",
          "import React , { FC } from 'react'",
          "",
          "const $TM_FILENAME_BASE: FC = () => {",
          "  return (",
          "    <div>App</div>",
          "  )",
          "}",
          "export default $TM_FILENAME_BASE"
      ],
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138

还有一个方便打印的，使用的时候对要打印的变量选中复制下，然后在代码行输入clog触发用户片段即可：

"log打印": {
  "prefix": "clog",
  "body": ["console.log('[ $CLIPBOARD ] >', $CLIPBOARD)$0"],
  "description": "log打印",
  "scope": "typescript,typescriptreact,javascript,javascriptreact"
},
1
2
3
4
5
6

如果自己想写用户片段，可以使用这个工具帮你写：https://snippet-generator.app/?description=&tabtrigger=&snippet=&mode=vscode

---

settings.json文件配置

vscode左下角齿轮-----设置------右上角打开设置(json)

/*  
  需要安装vscode插件，Vetur eslint prettier 三个插件 不然保存的时候不会自动修复
  且全局需要安装eslint
 */
{
    /*
     以下是编辑器相关的配置 （ 编辑器配置 ）
     */
    "editor.tabSize": 2, // 用2个空格缩进
    "editor.formatOnSave": true, // 在保存的时候格式化（vetur）
    "editor.detectIndentation": false,
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true // 保存的时候自动修复eslint错误
    },
    "editor.suggest.snippetsPreventQuickSuggestions": false,
    /*
     以下是 .vue 的文件格式化的配置 (vetur)
     在有eslint的项目中
     <template>部分使用eslint来格式化，
     <script>部分使用vscode自带的typescript来格式化，
     <style>部分使用prettier来格式化 需要安装prettier的vscode插件
     */
    "vetur.format.defaultFormatter.html": "none", // 使用eslint规则，所以关闭，以免冲突
    "vetur.format.defaultFormatter.js": "vscode-typescript", // 使用vscode-typescript规则
    "vetur.format.defaultFormatter.scss": "prettier", // 使用prettier格式化scss
    "vetur.format.styleInitialIndent": true, // 在style标签前面增加一个空格
    "vetur.format.options.tabSize": 2, // 使用2个空格作为缩进
    "[vue]": {
        "editor.defaultFormatter": "octref.vetur" // 使编辑器默认使用vetur来处理.vue的文件
    },
    /*
     以下是 .scss 的文件格式化的配置 ( beautify 插件 )
     使用beautify格式化.scss 的文件， 可以配合scss规则使用
     需要安装beautify css/sass/scss/less的插件
     */
    "[scss]": {
        "editor.defaultFormatter": "michelemelluso.code-beautifier"
    },
    "scss.lint.duplicateProperties": "warning", // 不可以在同一个class定义2个相同的属性
    "scss.lint.propertyIgnoredDueToDisplay": "error", // 由于 display 属性值，属性被忽略。例如，使用 display: inline 时，width、height、margin-top、margin-bottom 和 float 属性将不起作用。
    "scss.lint.zeroUnits": "warning", // 值为0时候不需要加单位
    /* 
     以下是 .js  .json 文件格式化的配置  
     使用beautify格式化.scss 的文件， 可以配合scss规则使用
     需要安装beautify css/sass/scss/less的插件
     */
    "[javascript]": {
        "editor.defaultFormatter": "vscode.typescript-language-features"
    },
    "[jsonc]": {
        "editor.defaultFormatter": "vscode.json-language-features"
    },
    "[json]": {
        "editor.defaultFormatter": "vscode.json-language-features"
    },
    /* 
     以下是 .vue 文件在template有class的提示的配置
     */
    "emmet.syntaxProfiles": {
        "vue-html": "html",
        "vue": "html"
    },
    "editor.mouseWheelZoom": true,
    "[markdown]": {
        "editor.defaultFormatter": "yzhang.markdown-all-in-one"
    },
    "[html]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "explorer.confirmDragAndDrop": false,
    "[typescript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    /*
     以下是vetur相关的配置，vetur可用于格式化.vue结尾的文件，
     在有没有配置eslint的项目中使用
     <template>部分使用js-beautify-html来格式化，
     <script>部分使用vscode自带的typescript来格式化，
     <style>部分使用prettier来格式化 需要安装prettier的vscode插件
     */
    // "vetur.format.defaultFormatter.html": "js-beautify-html",
    // "vetur.format.defaultFormatterOptions": {
    //     "js-beautify-html": {
    //         "wrap_line_length": 300,
    //         "wrap_attributes": "auto", // [auto|force|force-aligned|force-expand-multiline]
    //         "end_with_newline": false
    //     }
    // },
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89

eslint文件配置

.eslintrc.js：

// http://eslint.org/docs/user-guide/configuring
// 一、eslint 安装
// npm i -g eslint //全局安装
// npm i -D eslint //项目安装

// 二、eslint 定义规则

// 创建 .eslintrc.js 文件

// 可以使用 ./node_modules/.bin/eslint --init 创建文件
// .eslintrc.* 文件支持 .js .yaml .yal .json等格式的配置文件，这里使用 .js文件
// 在 package.json 里创建一个 eslintConfig 属性，在那里，同样可以定义你的配置
// 如果 .eslintrc.js 和 package.json里的 eslintConQfig 同时存在，则只读取 .eslintrc.js文件

// 项目级配置

// 与要检测的文件在同一目录下的 .eslintrc.\* 或 package.json 文件
// 继续在父级目录寻找 .eslintrc 或 package.json文件，直到根目录（包括根目录）或直到发现一个有"root": true的配置

// eslint总是忽略 /node_modules/\* 和 /bower_components/\* 中的文件
// .eslintignore 文件是一个纯文本文件，其中的每一行都是一个 glob 模式表明哪些路径应该忽略检测。如：


module.exports = {
    // 默认情况下，ESLint会在所有父级组件中寻找配置文件，一直到根目录。ESLint一旦发现配置文件中有 "root": true，它就会停止在父级目录中寻找。
    root: true,
    env: {
        // 环境定义了预定义的全局变量
        // 你的脚本将要运行在什么环境中；
        node: true,
        es6: true
    },
    parserOptions: {
        // JavaScript 选项
        parser: 'babel-eslint'
    },
    globals: {
        // 额外的全局变量
        $: true,
        jquery: true,
        CountUp: true,
        Swiper: true,
        ActiveXObject: true
    },
    plugins: [
        'vue'
    ],
    extends: ['eslint:recommended', 'plugin:vue/recommended'],
    // add your custom rules here
    /**
     * "off" 或 0 - 关闭规则
     * "warn" 或 1 - 开启规则，使用警告级别的错误：warn (不会导致程序退出),
     * "error" 或 2 - 开启规则，使用错误级别的错误：error (当被触发的时候，程序会退出)
     */
    rules: {
        'indent': [2, 2, { SwitchCase: 1 }], // 缩进
        'eqeqeq': [2, 'always'], // 要求使用 === 和 !==
        'semi': [2, 'never'],// 要求或禁止使用分号代替 ASI
        'quotes': [2, 'single', 'avoid-escape'], // 强制使用一致的反勾号、双引号或单引号
        'no-undef': 2,// 禁用未声明的变量，除非它们在 /*global */ 注释中被提到
        'no-undef-init': 2, // 禁止将变量初始化为 undefined
        'one-var': [0, 'always'], // 强制函数中的变量要么一起声明要么分开声明
        'arrow-parens': 0, // 要求箭头函数的参数使用圆括号
        'no-unused-vars': [
            'error',
            {
                vars: 'all',
                args: "none",
                ignoreRestSiblings: false
            }
        ],
        // 数组和对象键值对最后一个逗号， never参数：不能带末尾的逗号, always参数：必须带末尾的逗号，
        // always-multiline：多行模式必须带逗号，单行模式不能带逗号
        "comma-dangle": [2, "never"],
        //  #去掉代码结尾的分号
        "prettier.semi": 0,
        // 禁止在return、throw、continue 和 break语句之后出现不可达代码
        'no-case-declarations': 0, // 不允许在 case 子句中使用词法声明
        'no-mixed-spaces-and-tabs': 0, // 不允许空格和 tab 混合缩进
        'eslint-disable-next-line': 0,
        'generator-star-spacing': 0, // 强制 generator 函数中 * 号周围使用一致的空格
        // allow debugger during development
        'no-console': 'off',
        'no-extra-parens': 1,//禁止不必要的括号
        'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
        'no-unused-expressions': 0, // 禁止出现未使用过的表达式,
        'vue/no-v-html': 'off',
        'vue/this-in-template': ['error', 'never'], // 不要在模版中使用this
        'vue/mustache-interpolation-spacing': 'error',// {{}}必须要有空格
        'vue/html-quotes': ['error', 'double'],// 强制HTML属性的引号样式 双引号
        'vue/prop-name-casing': ['error', 'camelCase'], // 组件内的props 命名必须是驼峰,首字母小写
        'vue/max-attributes-per-line': 'off',
        'vue/no-use-v-if-with-v-for': [
            'error',
            {
                allowUsingIterationVar: true
            }
        ],
        'vue/html-indent': ['error', 4, {
            'attribute': 1,
            'baseIndent': 1,
            'closeBracket': 0,
            'alignAttributesVertically': true,
            'ignores': []
        }],
        'vue/html-closing-bracket-newline': ['error', {
            'singleline': 'never',
            'multiline': 'never'
        }],
        'vue/singleline-html-element-content-newline': ['error', {
            'ignoreWhenNoAttributes': true,
            'ignoreWhenEmpty': true,
            'ignores': ['pre', 'textarea', 'b', 'button', 'span', 'i', 'p', 'el-radio', 'el-button']
        }],
        'vue/component-name-in-template-casing': ['error', 'kebab-case', {
            'registeredComponentsOnly': true,
            'ignores': []
        }],// 组件名称使用时格式<my-component></my-component> 声明已经引用时必须是驼峰。首字母大写
        'vue/html-self-closing': ['error', {
            'html': {
                'void': 'never',
                'normal': 'never',
                'component': 'never'
            },
            'svg': 'never',
            'math': 'never'
        }],
        'vue/attributes-order': ['error', {
            'order': [
                'DEFINITION',
                'LIST_RENDERING',
                'CONDITIONALS',
                'RENDER_MODIFIERS',
                'GLOBAL',
                'UNIQUE',
                'TWO_WAY_BINDING',
                'OTHER_DIRECTIVES',
                'OTHER_ATTR',
                'EVENTS',
                'CONTENT'
            ],
            'alphabetical': false
        }],
        'vue/order-in-components': [
            'error',
            {
                'order': [
                    'el',
                    'name',
                    'parent',
                    'functional',
                    [
                        'delimiters',
                        'comments'
                    ],
                    [
                        'components',
                        'directives',
                        'filters'
                    ],
                    'extends',
                    'mixins',
                    'inheritAttrs',
                    'model',
                    [
                        'props',
                        'propsData'
                    ],
                    'fetch',
                    'asyncData',
                    'data',
                    'computed',
                    'watch',
                    'LIFECYCLE_HOOKS',
                    'methods',
                    'head',
                    [
                        'template',
                        'render'
                    ],
                    'renderError'
                ]
            }
        ]
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186