vscode插件前端项目配置

熊黎龙2023年1月13日大约 5 分钟约 1641 字

vscode插件推荐

基础插件

Chinese (Simplified) Language Pack for Visual Studio Code 中文语言包
DotENV
- 突出显示的.env文件，使其更加易读而且防止错误
Image preview 图片预览
indent-rainbow 彩虹缩进提示
Material Icon Theme 侧边栏文件图标主题

HTML插件

Color Highlight 在代码中直观的显示定义的'颜色'。安装即可使用。
Highlight Matching Tag 高亮显示正在聚焦的一对Html标签。安装即可使用。
Auto Rename Tag 自动修改匹配的标签
CSS Peek 鼠标放到类名上，可以窥探class内容
- vue文件内部样式窥视不了，不过可以Ctrl+点击跳转

Javascript插件

ESLint
- 插件化的JavaScript代码格式检测工具。配置文件：.eslintrc.js
- 用来检测错误并自动修复它们或提供手动修复它们的选项。
- 这些错误是由语法错误或违反编程风格指南产生的。编程风格可以按照实际情况高度定制。

Prettier 代码格式化工具

安装依赖：npm install prettier --save-dev

在根目录新建配置文件：.prettierrc.cjs

module.exports = {
  semi: false,  // 尾句不加分号
  singleQuote: true,  // 使用单引号
  printWidth: 128,  // 一行代码最大字数
  trailingComma: 'none',  // 多行尾随不加逗号
  arrowParens: 'avoid',  // 箭头函数只有一个参数时，省略括号
  tabWidth: 2,  // tab宽度尾2空格
  useTabs: false,  // 使用空格缩进
  bracketSpacing: true // 在对象内打印空格
}

官网：点击查看
官方配置文档：点击查看。
尤雨溪配置：vue-next
打开.vue和.js文件，在文件内右键选择使用...格式化文档，配置默认格式化程序为Prettier
如果需要保存时自动格式化，在vscode左下角设置里面，找到文本编辑器-格式化，勾选保持时格式化选项

Regex Previewer 预览正则匹配效果
- 写完正则代码后，会在上放自动弹出Test Regex...按钮，点击可以查看正则效果

ESLint配置

shell

npm i -D eslint  # 安装
npx eslint --init  # 初始化配置

# 1. 模式选择为严格模式
# 2. 语言选择为JavaScript
# 3. 框架选vue
# 4. ts试情况而定
# 5. 使用空格全选 代码在浏览器+node运行
# 6. 选择第一个流行风格
# 7. 使用Standard社区指南
# 8. 保存为js配置文件
# 9. 使用npm安装

npm i -D vite-plugin-eslint
npm install @babel/core @babel/eslint-parser --save-dev

vite.config.js

// vite.config.js 文件
import eslintPlugin from 'vite-plugin-eslint'

export default defineConfig({
  plugins: [
    vue(),
    // 添加下面这块
    eslintPlugin({
      include: ['src/**/*.js', 'src/**/*.vue', 'src/*.js', 'src/*.vue']
    })
  ]
})

.eslintrc.js

// .eslintrc.js 文件
module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true
  },
  // ESLint 中基础配置需要继承的配置
  extends: [
    'standard',
    // 新增这里vue3支持
    'plugin:vue/vue3-recommended'
  ],
  // 这是初始生成的 将其中的内容更改为下面的
  // parserOptions: {
  //   ecmaVersion: 'latest',
  //   sourceType: 'module'
  // },

  // 解析器配置
  parserOptions: {
    ecmaVersion: 6,
    sourceType: 'module',
    ecmaFeatures: {
      modules: true
    },
    requireConfigFile: false,
    parser: '@babel/eslint-parser'  // 解析器
  },
  plugins: [
    'vue'
  ],
  // 需要修改的启用规则和错误级别
  /**
  错误级别有三种:
   "off" 或 0 ：关闭规则
   "warn" 或 1 ：开启规则，警告级别，不会导致程序退出
   "error" 或 2 ：开启规则，错误级别，当被触发时会导致程序退出
   **/
  rules: {
    semi: [2, 'never'], // 禁止尾部使用分号“ ; ”
    'no-var': 'error', // 禁止使用 var
    indent: ['error', 2], // 缩进2格
    'no-mixed-spaces-and-tabs': 'error', // 不能空格与tab混用
    quotes: [2, 'single'], // 使用单引号
    'vue/html-closing-bracket-newline': 'off', // 不强制换行
    'vue/singleline-html-element-content-newline': 'off', // 不强制换行
    'vue/max-attributes-per-line': ['error', {
      singleline: { max: 5 },
      multiline: { max: 5 }
    }] // vue template模板元素第一行最多5个属性
    // 其它的规则可以去eslint查看，根据自己需要进行添加
  }
}

vue3插件

Vue Language Features (Volar)
- vue3的代码高亮和语法提示。直接安装即可，官方文档：点击查看
- 请注意不要安装Vetur
Vue 3 Snippets vue3代码片段自动补全

SCSS插件

HTML CSS Support css支持
stylelint
- 检验CSS/SASS/LESS代码规范的插件
- 安装基本依赖：npm install --save-dev stylelint stylelint-config-standard
- 安装scss格式化依赖：npm install --save-dev stylelint-scss stylelint-config-standard-scss
- 在根目录创建配置文件.stylelintrc.js
```
module.exports = {
  extends: "stylelint-config-standard-scss"
}
```

其他插件

EditorConfig for VS Code
- 自定义代码规范的工具。该插件配置的代码格式化规则的优先级高于编辑器默认的。
- 需要在项目根目录创建.editorconfig配置文件来配置自定义代码格式化规范。如果没有配置使用编辑器默认的规范。
markdownlint MarkDown语法规范检查
GitLens 每行代码都会有git提示，可以在gitlens窗口查看详情
Git Graph 图形化显示git，在最底部找到Git Graph按钮

优化配置

使用Ctrl+Shift+p打开搜索，搜索打开用户设置(json)，在配置文件中添加：

{
    "editor.fontSize": 16,
    "editor.tabSize": 2,
    // 调整窗口的缩放级别，放大菜单栏的字体
    "window.zoomLevel": 1.5,
    // 延迟自动保存文件
    "files.autoSave": "afterDelay",
    // 延迟自动保存时间为2秒
    "files.autoSaveDelay": 2000,
    // 如果安装了vim插件，需要恢复正常的复制粘贴快捷键。
    "vim.handleKeys": {
        "<C-a>": false,
        "<C-c>": false,
        "<C-v>": false,
        "<C-x>": false,
        "<C-z>": false
    },
    // 按住 Ctrl 键并滚动鼠标滚轮时对编辑器字体大小进行缩放。
    "editor.mouseWheelZoom": true,
    // 若设置为 true，则自动从当前 Git 仓库的默认远程仓库提取提交。若设置为“全部”，则从所有远程仓库进行提取。
    "git.autofetch": true,
    "git.enableSmartCommit": true,
    "git.confirmSync": false,
    // scss中取消@apply的报错
    "scss.lint.unknownAtRules": "ignore",
}

快速创建vue模板文件

点击vscode左下角配置图标按钮，选择配置用户代码片段
在输入框中输入vue，然后回车
填写以下配置

{
  "Print to console": {
    "prefix": "vue",
    "body": [
      "<template>",
      "  <div>",
      "  </div>",
      "</template>",
      "",
      "<script setup>",
      "",
      "</script>",
      "",
      "<style lang=\"scss\" scope>",
      "</style>"
    ],
    "description": ""
  }
}

这样就配置完成了。

创建一个vue空文件，输入vue，然后回车就可以了。