前端编程规范(VSCode + Vue)

最新推荐文章于 2025-04-17 16:44:58 发布

海森堡_lichangan

最新推荐文章于 2025-04-17 16:44:58 发布

阅读量2.3k

点赞数 4

分类专栏： Vue相关 JavaScript 文章标签： flutter css html

本文链接：https://blog.csdn.net/u010259906/article/details/121395013

版权

完整卸载 MAC 上面的 VSCode

第一步：退出 VSCode 应用
第二步：输入如下指令，删除 VSCode 的设置和配置

sudo rm -rf $HOME/Library/Application\ Support/Code

第三步：输入如下指令，删除 VSCode 的插件

sudo rm -rf $HOME/.vscode

第四步：从 Application 中移除 VSCode

代码编程规范

Code->首选项->设置,然后搜索settings。
在这里插入图片描述

安装中文语言包

安装Vetur

安装HTML Snippets

（1）解决<template></template>内部的html自动提示和补全问题
（2）解决内部的html自动提示和补全问题

在setttings.json中配置

  "files.associations": {
   
        "*.vue":"html"
    }

配置VSCode编辑器

在setttings.json中配置

   // 界面配置路径 Text Editor
    "editor.wordWrap": "bounded", // 设置 超过word Wrap Column设置的字符数、达到视口最小宽度，时自动换行
    "editor.wordWrapColumn": 120, // editor.wordWrap 配置为wordWrapColumn或者bounded时起作用
    "editor.insertSpaces": true, // 设置输入tab键时是否自动转为插入空格（默认ture，即自动转空格）,当editor.detectIndentation配置为 true 时，该配置项将被自动覆盖
    "editor.detectIndentation": false, // 设置是否自动检测对齐，控制打开文件时是否基于文件内容，自动检测editor.tabSize 和editor.insertSpaces
    // 界面配置路径 Text Editor -> Font
    "editor.fontSize": 14, // 设置字体大小， 默认 14
    //界面配置路径 Text Editor -> Files
    "files.autoSave": "afterDelay", //设置延迟一定的时间后自动保存文件
    "files.autoSaveDelay": 5000, // 设置自动保存文件前需要延迟的时间，单位毫秒 默认1000
    "files.enableTrash": true, // 设置删除文件、目录时是否允许删除到操作系统回收站，默认为true，即允许
    "files.encoding": "utf8", // 设置读写文件时所用编码 默认UTF-8，可针对每种语言进行设置
    "files.autoGuessEncoding": false, // 设置打开文件时，是否自动猜测字符编码，默认false，即不自动猜测，可针对每种语言进行设置
    // 界面配置路径 Text Editor -> Formatting
    "editor.formatOnPaste": true, // 设置黏贴内容时是否自动格式化，true表示自动格式化，需要配置格式化器(formatter)才可使用
    "editor.formatOnSave": true, // 设置保存文件时是否自动格式化，true表示自动格式化,需要配置格式化器(formatter)才可使用
    "editor.formatOnSaveMode": "file", // 设置保存文件时格式化整个文件还是仅被修改处。该配置项仅在 "editor.formatOnPaste" 为 true时生效
    "editor.formatOnType": true, // 设置输入完成后是否自动格式化当前行
    // 界面配置路径 Text Editor -> Minimap
    "editor.minimap.maxColumn": 120, // 设置minimap的宽度以设置可渲染的最大列数，默认120
    // 界面配置路径 Text Editor -> Suggestions
    //如果不开启将不会显示代码提示功能,Vetur、Vue 2 Snippets等提示功能将无法使用
    "editor.quickSuggestions": {
   
        "other": true,
        "comments": false,
        "strings": false
    },

安装ESLint

在项目的根目录建立.eslintrc.js文件，键入以下代码（Vue CLI 已自动创建）

module.exports = {
   
  root: true,
  env: {
   
    node: true,
  },
  extends: ['plugin:vue/essential', '@vue/standard'],
  parserOptions: {
   
    parser