vs code使用

vs code使用

一.下载及安装：

1.下载：https://code.visualstudio.com/

2.安装：下一步即可

二.插件安装：

参考：https://blog.csdn.net/shenxianhui1995/article/details/81604818（此链接中插件带有效果图，如果此链接失效，则参考如下个人整理的插件）

参考：https://blog.csdn.net/qq_36256944/article/details/80553774    vs code 打造舒适的vue开发环境

vetur、Prettier - Code formatter和ESLint 必装

1.Chinese 语言包，这应该是大家的最爱（个人推荐）

2.Auto Close Tag 自动关闭标签 （个人推荐）

3.Auto Rename Tag 自动重命名标签 （个人推荐）

4.Beautify 格式化

5.Bracket Pair Colorizer 颜色识别括号

6.change-case 虽然 VSCode 内置了开箱即用的文本转换选项，但其只能进行文本大小写的转换。而此插件则添加了用于修改文本的更多命名格式，包括驼峰命名、下划线分隔命名，snake_case 命名以及 CONST_CAS 命名等

7.Color Info 使用此插件，你可以追踪至样式表中 CSS 类和 ids 定义的地方。当你在 HTML 文件中右键单击选择器时，选择“ Go to Definition 和 Peek definition ”选项，它便会给你发送样式设置的 CSS 代码

8.Debugger for Chrome 前端调试

9.ESLint EsLint可以帮助我们检查Javascript编程时的语法错误。比如：在Javascript应用中，你很难找到你漏泄的变量或者方法。EsLint能够帮助我们分析JS代码，找到bug并确保一定程度的JS语法书写的正确性 

10.filesize 在底部状态栏显示当前文件大小，点击后还可以看到详细创建、修改时间

11.GitLens — Git supercharged 显示文件最近的 commit 和作者，显示当前行 commit 信息

12.HTML Boilerplate 通过使用 HTML 模版插件，你就摆脱了为 HTML 新文件重新编写头部和正文标签的苦恼。你只需在空文件中输入 html，并按 Tab 键，即可生成干净的文档结构

13.HTMLHint HTML 代码格式检测

14.HTML Snippets 代码自动填充 （个人推荐）

15.htmltagwrap 在选中HTML标签中外面套一层标签 ”Alt + W” (“Option + W” for Mac) （个人推荐）

16.Image Preview 鼠标移到路径里显示图像预览

17.Indenticator 突出目前的缩进深度

18.intelliSense for CSS class names in HTML 把项目中 css 文件里的名称智能提示在 html 中

19.JavaScript (ES6) code snippets es6代码片段 （个人推荐）

20.Live Server 浏览器实时刷新

21.Node.js Modules Intellisense require 时的包提示

22.Path Intellisense 路径自动补全

23.Quokka.js Quokka 是一个调试工具插件，能够根据你正在编写的代码提供实时反馈，使用方法: ctrl+shift+p 输入 quokka 选择 new javascript 就可以了

24.Regex Previewer 这是一个用于实时测试正则表达式的实用工具。它可以将正则表达式模式应用在任何打开的文件上，并高亮所有的匹配项

25.SVG Viewer Vue 语法高亮显示, 语法错误检查, 代码自动补全(配合 ESLint 插件效果更佳) （个人推荐）

26.vscode-fileheader 顶部注释模板，可定义作者、时间等信息，并会自动更新最后修改时间快捷键: Ctrl+Alt+i(默认信息可在 文件→首选项→设置 中修改)

三.新建或打开项目：

新建文件一般不常用，都是通过在项目中右键新建的

常用的是打开文件夹功能

一般方式是在文件资源管理器中创建个文件夹，然后在vs code中打开文件夹即可

四.调试：

1.安装插件：Debugger for Chrome

2.配置Debugger for Chrome插件：

ctrl+shift+d打切换到调试窗口，最上面有下拉菜单-点击添加配置，自动生成lauch.json文件，默认不用改

3.终端-新建终端

npm run dev

4.设断点调试

五.新项目中设置代码自动格式化：

参考：https://www.haorooms.com/post/vscode_eslint

1.新项目：

通过webpack安装的时候选择安装eslint即可，会在项目中生成.eslintrc.js类似的文件生成

2.设置规则：

// 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'
  }
}

3.设置保存时，自动格式化：
文件 > 首选项 > 设置 打开 VSCode 配置文件即settings.json配置如下代码

{
    // 是否允许自定义的snippet片段提示
    "editor.snippetSuggestions"      : "top",
    "editor.fontSize"                : 20,
    "editor.fontWeight"              : "400",
    "editor.formatOnType"            : true,
    "workbench.iconTheme"            : "material-icon-theme",
    "workbench.colorTheme"           : "One Dark Pro",
    "guides.enabled": false,
    "editor.tabSize": 2,
    "git.confirmSync": false,
    "window.zoomLevel": 0,
    "editor.renderWhitespace": "boundary",
    "editor.cursorBlinking": "smooth",
    "editor.minimap.enabled": true,
    "editor.minimap.renderCharacters": false,
    "window.title": "${dirty}${activeEditorMedium}${separator}${rootName}",
    "editor.codeLens": true,
    // 配置文件关联，以便启用对应的提示
    "files.associations": {
      "*.vue": "vue",
      "*.wxss": "css"
    },
    // 配置emmet是否启用tab展开缩写
    "emmet.triggerExpansionOnTab": true,
    // 配置emmet对文件类型的支持
    "emmet.syntaxProfiles": {
        "javascript": "jsx",
        "vue": "html",
        "vue-html": "html"
    },
    // 是否开启eslint检测
    "eslint.enable": true,
    // 文件保存时是否根据eslint进行格式化
    "eslint.autoFixOnSave": true,
    // eslint配置文件
    "eslint.options": {
      "extensions": [
          ".js",
          ".vue"
      ]
    },
    // eslint能够识别的文件后缀类型
    "eslint.validate": [
        "javascript",{
            "language": "vue",
            "autoFix": true
        },"html",
        "vue"
    ],
    "search.exclude": {
        "**/node_modules": true,
        "**/bower_components": true,
        "**/dist": true
    },
    // 格式化快捷键（默认）：Shift+Alt+F
    // prettier进行格式化时，开启eslint支持
    // "prettier.eslintIntegration": true,
    // 是否使用单引号
    "prettier.singleQuote": true,
}

4.安装插件：

ESLint 安装这个插件即可

六.老项目中设置代码自动格式化：（比较麻烦，所以在创建项目的时候建议就使用eslint规则）

前提你在package.json中安装了eslint的依赖，不然配置无用，意思就是必须安装eslint相关的包

在下面代码中搜索：eslint

把相关的eslint包引用都拷贝到自己的项目中

然后使用：

npm install

去更新依赖包

{
  "name": "ads",
  "version": "1.0.0",
  "description": "广告模块",
  "author": "zhanglp",
  "private": true,
  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "lint": "eslint --ext .js,.vue src",
    "build": "node build/build.js"
  },
  "dependencies": {
    "vue": "^2.5.2",
    "vue-router": "^3.0.1"
  },
  "devDependencies": {
    "autoprefixer": "^7.1.2",
    "babel-core": "^6.22.1",
    "babel-eslint": "^8.2.1",
    "babel-helper-vue-jsx-merge-props": "^2.0.3",
    "babel-loader": "^7.1.1",
    "babel-plugin-syntax-jsx": "^6.18.0",
    "babel-plugin-transform-runtime": "^6.22.0",
    "babel-plugin-transform-vue-jsx": "^3.5.0",
    "babel-preset-env": "^1.3.2",
    "babel-preset-stage-2": "^6.22.0",
    "chalk": "^2.0.1",
    "copy-webpack-plugin": "^4.0.1",
    "css-loader": "^0.28.0",
    "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",
    "extract-text-webpack-plugin": "^3.0.0",
    "file-loader": "^1.1.4",
    "friendly-errors-webpack-plugin": "^1.6.1",
    "html-webpack-plugin": "^2.30.1",
    "node-notifier": "^5.1.2",
    "optimize-css-assets-webpack-plugin": "^3.2.0",
    "ora": "^1.2.0",
    "portfinder": "^1.0.13",
    "postcss-import": "^11.0.0",
    "postcss-loader": "^2.0.8",
    "postcss-url": "^7.2.1",
    "rimraf": "^2.6.0",
    "semver": "^5.3.0",
    "shelljs": "^0.7.6",
    "uglifyjs-webpack-plugin": "^1.1.1",
    "url-loader": "^0.5.8",
    "vue-loader": "^13.3.0",
    "vue-style-loader": "^3.0.1",
    "vue-template-compiler": "^2.5.2",
    "webpack": "^3.6.0",
    "webpack-bundle-analyzer": "^2.9.0",
    "webpack-dev-server": "^2.9.1",
    "webpack-merge": "^4.1.0"
  },
  "engines": {
    "node": ">= 6.0.0",
    "npm": ">= 3.0.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

1.在我们项目根目录添加.eslintrc.js 文件

2.设置规则：

// 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'
  }
}

3.安装插件：

ESLint 安装这个插件即可

4.3.设置保存时，自动格式化：

文件 > 首选项 > 设置 打开 VSCode 配置文件即settings.json配置如下代码

{

    // 是否允许自定义的snippet片段提示

    "editor.snippetSuggestions"      : "top",

    "editor.fontSize"                : 20,

    "editor.fontWeight"              : "400",

    "editor.formatOnType"            : true,

    "workbench.iconTheme"            : "material-icon-theme",

    "workbench.colorTheme"           : "One Dark Pro",

    "guides.enabled": false,

    "editor.tabSize": 2,

    "git.confirmSync": false,

    "window.zoomLevel": 0,

    "editor.renderWhitespace": "boundary",

    "editor.cursorBlinking": "smooth",

    "editor.minimap.enabled": true,

    "editor.minimap.renderCharacters": false,

    "window.title": "${dirty}${activeEditorMedium}${separator}${rootName}",

    "editor.codeLens": true,

    // 配置文件关联，以便启用对应的提示

    "files.associations": {

      "*.vue": "vue",

      "*.wxss": "css"

    },

    // 配置emmet是否启用tab展开缩写

    "emmet.triggerExpansionOnTab": true,

    // 配置emmet对文件类型的支持

    "emmet.syntaxProfiles": {

        "javascript": "jsx",

        "vue": "html",

        "vue-html": "html"

    },

    // 是否开启eslint检测

    "eslint.enable": true,

    // 文件保存时是否根据eslint进行格式化

    "eslint.autoFixOnSave": true,

    // eslint配置文件

    "eslint.options": {

      "extensions": [

          ".js",

          ".vue"

      ]

    },

    // eslint能够识别的文件后缀类型

    "eslint.validate": [

        "javascript",{

            "language": "vue",

            "autoFix": true

        },"html",

        "vue"

    ],

    "search.exclude": {

        "**/node_modules": true,

        "**/bower_components": true,

        "**/dist": true

    },

    // 格式化快捷键（默认）：Shift+Alt+F

    // prettier进行格式化时，开启eslint支持

    // "prettier.eslintIntegration": true,

    // 是否使用单引号

    "prettier.singleQuote": true,

}

七.关闭eslint检测:

vue init webpack的项目使用

//config/index.js 文件把下面这个属性设置false即可

useEslint: false