深浅模式

一.项目配置 ​

前言

主要是介绍一些好用的插件，围绕 vscode 进行一些配置，对项目进行一些配置，提高开发效率

1.vcode 配置 ​

1.1.安装插件 ​

详情
  • Vue 2 Snippets：Vue2 代码片段补全
  • Document This: 能够一键给代码中的类、函数加上注释，支持函数声明、函数表达式、箭头函数等
  • Auto Close Tag：自动添加 HTML / XML 关闭标签
  • Auto Rename Tag：自动重命名配对的 HTML / XML 标签
  • Beautify：格式化代码
  • Bracket Pair Colorizer：颜色识别匹配括号
  • Code Runner：非常强大的一款插件，能够运行多种语言的代码片段或代码文件：C，C ++，Java，JavaScript，PHP，Python，Perl，Ruby，Go 等等
  • Chinese (Simplified) Language Pack for Visual Studio Code：中文简体语言包
  • Color Info：这个便捷的插件，将为你提供你在 CSS 中使用颜色的相关信息。你只需在颜色上悬停光标，就可以预览色块中色彩模型的（HEX、 RGB、HSL 和 CMYK）相关信息了
  • CSS Peek：使用此插件，你可以追踪至样式表中 CSS 类和 ids 定义的地方。当你在 HTML 文件中右键单击选择器时，选择“ Go to Definition 和 Peek definition ”选项，它便会给你发送样式设置的 CSS 代码
  • Debugger for Chrome：前端调试
  • ESLint：EsLint 可以帮助我们检查 Javascript 编程时的语法错误
  • filesize：在底部状态栏显示当前文件大小，点击后还可以看到详细创建、修改时间
  • Git History：以图表的形式查看 git 日志
  • GitLens — Git supercharged：显示文件最近的 commit 和作者，显示当前行 commit 信息
  • HTML CSS Support：html 代码自动补全以及 class 智能提示
  • HTMLHint：HTML 代码格式检测
  • HTML Snippets：代码自动填充
  • Image Preview：鼠标移到路径里显示图像预览
  • JavaScript (ES6) code snippets：es6 代码片段
  • Live Server：浏览器实时刷新
  • Vetur：Vue 语法高亮显示, 语法错误检查, 代码自动补全
  • vscode-fileheader：顶部注释模板，可定义作者、时间等信息，并会自动更新最后修改时间，快捷键: Ctrl+Alt+i (默认信息可在 文件 → 首选项 → 设置 中修改)

1.1.2 配置参数 ​

settins.json
json
{
  "editor.quickSuggestions": {
    //开启自动显示建议
    "other": true,
    "comments": true,
    "strings": true
  }, // vscode默认启用了根据文件类型自动设置tabsize的选项
  "editor.detectIndentation": false, // 重新设定tabsize
  "editor.tabSize": 2, // 每次保存的时候自动格式化
  "editor.formatOnSave": true, // 每次保存的时候将代码按eslint格式进行修复
  "eslint.autoFixOnSave": true, // 添加 vue 支持
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "html",
      "autoFix": true
    },
    {
      "language": "vue",
      "autoFix": true
    }
  ], // 让prettier使用eslint的代码格式进行校验
  "prettier.eslintIntegration": true, // 去掉代码结尾的分号
  "prettier.semi": false, // 使用单引号替代双引号
  "prettier.singleQuote": true, // 让函数(名)和后面的括号之间加个空格 // "javascript.format.insertSpaceBeforeFunctionParenthesis": false, // html格式化，这个按用户自身习惯选择
  "vetur.format.defaultFormatter.html": "js-beautify-html", // 让vue中的js按编辑器自带的ts格式进行格式化
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": "force-aligned" // vue组件中html代码格式化样式
    }
  },
  "search.exclude": {
    "**/node_modules": true,
    "**/bower_components": true,
    "**/dist": true
  },
  "emmet.syntaxProfiles": {
    "javascript": "jsx",
    "vue": "html",
    "vue-html": "html"
  }, // 设置字体 // "editor.fontFamily": "'Droid Sans Mono', 'Courier New', monospace, 'Droid Sans Fallback'", // vscode 程序title位置显示内容，这里设置了显示路径
  "window.title": "${dirty}${activeEditorMedium}${separator}${rootName}", // 编辑器建议 显示在头部
  "editor.snippetSuggestions": "top",
  "editor.suggestSelection": "first",
  "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "beautify.ignore": "",
  "editor.fontSize": 20
}

2.vue 项目配置 ​

1.2.babelrc ​

js
// .babelrc
{
  "plugins": [
    "check-es2015-constants",
    "es2015-arrow-functions",
    "es2015-block-scoped-functions",
    // ...
  ]
}

1.2.2 eslint配置 ​

.eslintrc.js
js
module.exports = {
  env: {
    browser: true,
    commonjs: true,
    es6: true,
  },
  extends: "eslint:recommended", // 在js里面有些时候用到一些全局变量，防止eslint无脑报错
  globals: {
    Atomics: "readonly",
    SharedArrayBuffer: "readonly",
    process: false,
  },
  parser: "vue-eslint-parser",
  parserOptions: {
    ecmaVersion: 2018,
    sourceType: "module",
  },
  rules: {
    "no-console": "off",
    "linebreak-style": [0, "error", "windows"],
    indent: ["off", 2],
    "accessor-pairs": 2,
    "arrow-spacing": [
      2,
      {
        before: true,
        after: true,
      },
    ],
    "array-bracket-spacing": [2, "never"],
    "block-spacing": [2, "always"],
    "brace-style": [
      2,
      "1tbs",
      {
        allowSingleLine: true,
      },
    ],
    camelcase: [
      2,
      {
        properties: "never",
      },
    ],
    "comma-dangle": [2, "never"],
    "comma-spacing": [
      2,
      {
        before: false,
        after: true,
      },
    ],
    "comma-style": [2, "last"],
    "constructor-super": 2,
    curly: [2, "multi-line"],
    "dot-location": [2, "property"],
    "eol-last": 2,
    eqeqeq: [2, "allow-null"],
    "generator-star-spacing": [
      2,
      {
        before: true,
        after: true,
      },
    ],
    "handle-callback-err": [2, "^(err|error)$"],
    "jsx-quotes": [2, "prefer-single"],
    "key-spacing": [
      2,
      {
        beforeColon: false,
        afterColon: true,
      },
    ],
    "keyword-spacing": [
      2,
      {
        before: true,
        after: true,
      },
    ],
    "new-cap": [
      2,
      {
        newIsCap: true,
        capIsNew: false,
      },
    ],
    "new-parens": 2,
    "no-array-constructor": 2,
    "no-caller": 2,
    "no-class-assign": 0,
    "no-cond-assign": 2,
    "no-const-assign": 2,
    "no-control-regex": 2,
    "no-debugger": 2,
    "no-delete-var": 2,
    "no-dupe-args": 2,
    "no-dupe-class-members": 2,
    "no-dupe-keys": 2,
    "no-duplicate-case": 2,
    "no-duplicate-imports": 2,
    "no-empty-character-class": 2,
    "no-empty-pattern": 2,
    "no-eval": 2,
    "no-ex-assign": 2,
    "no-extend-native": 2,
    "no-extra-bind": 2,
    "no-extra-boolean-cast": 2,
    "no-extra-parens": [2, "functions"],
    "no-fallthrough": 2,
    "no-floating-decimal": 2,
    "no-func-assign": 2,
    "no-implied-eval": 2,
    "no-inner-declarations": [2, "functions"],
    "no-invalid-regexp": 2,
    "no-irregular-whitespace": 2,
    "no-iterator": 2,
    "no-label-var": 2,
    "no-labels": [
      2,
      {
        allowLoop: false,
        allowSwitch: false,
      },
    ],
    "no-lone-blocks": 2,
    "no-mixed-spaces-and-tabs": 2,
    "no-multi-spaces": 2,
    "no-multi-str": 2,
    "no-multiple-empty-lines": [
      2,
      {
        max: 1,
      },
    ],
    "no-native-reassign": 2,
    "no-negated-in-lhs": 2,
    "no-new": 2,
    "no-new-func": 2,
    "no-new-object": 2,
    "no-new-require": 2,
    "no-new-symbol": 2,
    "no-new-wrappers": 2,
    "no-obj-calls": 2,
    "no-octal": 2,
    "no-octal-escape": 2,
    "no-path-concat": 2,
    "no-proto": 2,
    "no-redeclare": 2,
    "no-regex-spaces": 2,
    "no-return-assign": [2, "except-parens"],
    "no-self-assign": 2,
    "no-self-compare": 2,
    "no-sequences": 2,
    "no-shadow-restricted-names": 2,
    "no-spaced-func": 2,
    "no-sparse-arrays": 2,
    "no-this-before-super": 2,
    "no-throw-literal": 2,
    "no-trailing-spaces": 2,
    "no-undef": 2,
    "no-undef-init": 2,
    "no-unexpected-multiline": 2,
    "no-unmodified-loop-condition": 2,
    "no-unneeded-ternary": [
      2,
      {
        defaultAssignment: false,
      },
    ],
    "no-unreachable": 2,
    "no-unsafe-finally": 2,
    "no-unused-vars": [
      2,
      {
        vars: "all",
        args: "none",
      },
    ],
    "no-useless-call": 2,
    "no-useless-computed-key": 2,
    "no-useless-constructor": 2,
    "no-useless-escape": 2,
    "no-whitespace-before-property": 2,
    "no-with": 2,
    "one-var": [
      2,
      {
        initialized: "never",
      },
    ],
    "operator-linebreak": [
      2,
      "before",
      {
        overrides: {
          "?": "before",
          ":": "before",
        },
      },
    ],
    "padded-blocks": [2, "never"],
    quotes: [2, "single", "avoid-escape"],
    semi: [2, "never"],
    "semi-spacing": [
      2,
      {
        before: false,
        after: true,
      },
    ],
    "space-before-blocks": [2, "always"], // function方法前面允许加空格
    "space-before-function-paren": [0, "never"],
    "space-in-parens": [2, "never"],
    "space-infix-ops": 2,
    "space-unary-ops": [
      2,
      {
        words: true,
        nonwords: false,
      },
    ],
    "spaced-comment": [
      2,
      "always",
      {
        markers: [
          "global",
          "globals",
          "eslint",
          "eslint-disable",
          "*package",
          "!",
          ",",
        ],
      },
    ],
    "template-curly-spacing": [2, "never"],
    "use-isnan": 2,
    "valid-typeof": 2,
    "wrap-iife": [2, "any"],
    "yield-star-spacing": [2, "both"],
    yoda: [2, "never"],
  },
}

TIP

可以使用通用的规则