vscode记录

南山隐士
303 阅读4分钟

外观配置

一个好的颜色主题将会保护你眼睛, 我经常使用的是自带的主题 ==Solarized Light==, 或者这个主题 ==Dracula Official== 也挺好看的 我觉得是挺好用的,当然你可以自定义自己的主题颜色

修改原主题Visual Studio Light背景颜色

"workbench.colorCustomizations": {
        "[Visual Studio Light]": {
            "editor.background": "#CCE8CF",
        },
    },
    "workbench.colorTheme": "Visual Studio Light",

豆沙绿我挺喜欢的一个颜色,挺适合敲代码的

安装 ==vscode-icons== 或者 ==VSCode Great Icons== 让你的文件可以显示图标,看上去更加直观

代码相关

既然我们使用到了vscode，面对最多的当然就是如何高效的写代码，方便开发， 这里主要针对以下几点进行述说：

代码检测

以下内容在基于vue-cli3进行测试

通过cli3可以快速创建一个vue的项目，选默认的包含了基本的 Babel + ESLint的 设置

我们在通过==npx eslint --init 来初始化 .eslintrc.js 文件==，当然你可以手动的添加， 建议使用前者， 设置完成后你就可以看到一个新的 .eslintrc.js 文件

==使用Aribnb 的规则让eslint检测更加严格== 安装 npm i -D eslint-config-airbnb-base eslint-plugin-import

最终你的 .eslintrc.js 文件如下：

module.exports = {
  env: {
    browser: true,
    es6: true,
  },
  extends: 'airbnb-base',
  globals: {
    Atomics: 'readonly',
    SharedArrayBuffer: 'readonly',
  },
  parserOptions: {
    ecmaVersion: 2018,
    sourceType: 'module',
  },
  plugins: [
    'vue',
  ],
  rules: {
    'linebreak-style': ["error", "windows"]
  },
}

vscode用户设置需要添加：

"eslint.validate": [
    "javascript",
    "javascriptreact",
    "vue"
  ], // eslint检测的语言

此时，我们就可以在项目中使用eslint 并且可以 在 ==rules== 中根据自己的需要设置不同的规则来确定eslint的检测行为

虽然我们的项目能使用到eslint， 但是vscode并不会提示， 只会在浏览器中看到对应的错误， ==想让vscode给你提示， 你需要安装 e1slint 的vscode 插件==

格式化

有了代码检测， 我们会发现我们写代码更加严格要求自己，但是有时候自己不小心写错了，或者你复制别人的代码的时候， 你发现别人代码中有分号，可是自己项目中不允许存在，eslint 疯狂报错， 自己一个个删除， 非常的麻烦

==prettier== 可以帮我们解决这个问题，它可以让你的代码按eslint 的规则进行格式化，并且支持 css ，这是默认的vscode格式化实现不到的， 在vscode 中安装 ==Prettier - Code formatter== 插件

由于vscode 有默认的格式化， 需要对vscode的用户设置添加：

"vetur.format.defaultFormatterOptions": {
    "prettier": {
      "eslintIntegration": true // 使用eslint规则进行格式化
    }
  },
  "vetur.format.defaultFormatter.js": "prettier-eslint",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "vetur.format.defaultFormatter.html": "prettier",
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },

需要对Vue进行格式化， ==你需要安装 Vetur 的vscode插件==，让vue可以读取Vue的代码 并且在你项目中安装： ==npm i -D prettier-eslint==

最终的vscode用户设置如下：

{
  "editor.fontSize": 14,
  "extensions.autoUpdate": false, // 是否自动更新扩展
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "vue"
  ], // eslint检测的语言
  "vetur.format.defaultFormatterOptions": {
    "prettier": {
      "eslintIntegration": true // 使用eslint规则进行格式化
    }
  },
  "vetur.format.defaultFormatter.js": "prettier-eslint",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "vetur.format.defaultFormatter.html": "prettier",
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "files.associations": {
    "*.cjson": "jsonc",
    "*.wxss": "css",
    "*.wxs": "javascript"
  },
  "emmet.includeLanguages": {
    "wxml": "html"
  },
  "prettier.semi": false,// 是否格式化的时候添加分号
  "prettier.singleQuote": true , // 是否以单引号
  "minapp-vscode.disableAutoConfig": true,
  "editor.formatOnSave": true // 保存的时候,进行格式化
}

.eslintrc.js 文件如下：

module.exports = {
  env: {
    browser: true,
    es6: true
  },
  extends: ["airbnb-base", "plugin:vue/recommended"],
  globals: {
    Atomics: "readonly",
    SharedArrayBuffer: "readonly"
  },
  parserOptions: {
    ecmaVersion: 2018,
    sourceType: "module"
  },
  plugins: ["vue"],
  rules: {
    "linebreak-style": [0, "error", "windows"],
    "comma-dangle": ["error", "never"], // 修正 eslint-plugin-vue 带来的问题
    "no-console": 0,
    'semi': ['error', 'never']
  }
};

插件

添加一个标签，不想自己写闭合便签， ==Auto Close Tag== 插件 修改了一个开始或者闭合标签，同步改变标签名 ==Auto Rename Tag== 插件 引入某个文件, 会给予路径补,智能提醒 ==Path Intellisense== 插件 css类名补全, 识别你项目中定义的类名,智能补全 ==HTML CSS Support== 插件 用户设置需要添加:

"editor.quickSuggestions": {
      "other": true,
      "comments": true,
      "strings": true
  }

给嵌套的括号加上不同的颜色, 好区分 ==Bracket Pair Colorizer== 插件 各种html标签片段 ==HTML Snippets== 插件 ES6代码片段 ==JavaScript (ES6) code snippets== 插件 一些常用的js片段 ==JavaScript Snippet Pack== 插件 给注释添加颜色 ==TODO Highlight== 插件

image.png
可以在用户设置中自定义

"todohighlight.keywords": [
    {
      "text": "yaojin:",
      "color": "#ff0000",
      "backgroundColor": "yellow",
      "overviewRulerColor": "grey"
    },
  ]

让你知道光标位置下代码的修改时间,作者信息等 ==Git Lens== 插件 给代码的类和方法加注释, 仅支持js文件, 使用ctrl + alt + D 连续按2次即可 ==Document This== 插件 检查你的英文单词是否正确 ==Code Spell Checker== 插件 快速输出console ==javascript console utils== 插件 换电脑后拿到原有的vscode配置 ==Settings Sync== 插件 一些插件汇总

==修改插件快捷键== ctrl + k 然后 ctrl + s 所有快捷键都有,然后修改就完事了

快捷键

快速定位到光标的位置 F12 快速定位查看文件但不跳转 shift + F12

avatar
文章
阅读
粉丝