VS Code was just updated to 1.29.1, then the colors were changed

[lovanya]

VS Code was just updated to 1.29.1, then the colors were changed。 looks strange！

[fisheva]

Could you please give me a copy of the code in the screenshot? And tell me what file it is? (JavaScript?)

So I can find out bugs easier.

[lovanya]

sorry, I am not at office now. It's a vue(vuejs) file and it happened on Windows 10.

[fisheva]

Wait for your copy. Copy the whole code in the file.

If you don’t go to office this weekend, then solve it on Monday, have a nice weekend.

[lovanya]

Thanks for ur wish)).

main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue';
import App from './App';
import router from './router';
import store from './store';
import iView from 'iview';
import i18n from '@/locale';
import config from '@/config';
import importDirective from '@/directive';
import importComponents from '@/components';
import 'iview/dist/styles/iview.css';
import './index.less';
import '@/assets/icons/iconfont.css';

// 实际打包时应该不引入mock
if (process.env.NODE_ENV !== 'production') {
  require('@/mock');
}

Vue.use(iView, {
  i18n: (key, value) => i18n.t(key, value),
  transfer: true // 所有带浮层的组件，是否将浮层放置在 body 内，默认为不设置，详见各组件默认的 transfer 值。可选值为 true 或 false。
});

Vue.config.productionTip = false;

/**
 * @description 全局注册应用配置
 */

Vue.prototype.$config = config;

/**
 * 注册指令
 */
importDirective(Vue);

/**
 * 注册组件
 */
importComponents(Vue);

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  i18n,
  store,
  render: h => h(App)
});

count-to.vue

<template>
  <div class="count-to-wrapper">
    <slot name="left" />
    <p class="content-outer"><span :class="['count-to-count-text', countClass]"
            :id="counterId">{{ init }}</span><i :class="['count-to-unit-text', unitClass]">{{ unitText }}</i></p>
    <slot name="right" />
  </div>
</template>

<script>
import CountUp from 'countup';
import './index.less';
export default {
  name: 'CountTo',
  props: {
    init: {
      type: Number,
      default: 0
    },
    /**
     * @description 起始值，即动画开始前显示的数值
     */
    startVal: {
      type: Number,
      default: 0
    },
    /**
     * @description 结束值，即动画结束后显示的数值
     */
    end: {
      type: Number,
      required: true
    },
    /**
     * @description 保留几位小数
     */
    decimals: {
      type: Number,
      default: 0
    },
    /**
     * @description 分隔整数和小数的符号，默认是小数点
     */
    decimal: {
      type: String,
      default: '.'
    },
    /**
     * @description 动画持续的时间，单位是秒
     */
    duration: {
      type: Number,
      default: 2
    },
    /**
     * @description 动画延迟开始的时间，单位是秒
     */
    delay: {
      type: Number,
      default: 0
    },
    /**
     * @description 是否禁用easing动画效果
     */
    uneasing: {
      type: Boolean,
      default: false
    },
    /**
     * @description 是否使用分组，分组后每三位会用一个符号分隔
     */
    usegroup: {
      type: Boolean,
      default: false
    },
    /**
     * @description 用于分组(usegroup)的符号
     */
    separator: {
      type: String,
      default: ','
    },
    /**
     * @description 是否简化显示，设为true后会使用unit单位来做相关省略
     */
    simplify: {
      type: Boolean,
      default: false
    },
    /**
     * @description 自定义单位，如[3, 'K+'], [6, 'M+']即大于3位数小于6位数的用k+来做省略
     *              1000即显示为1K+
     */
    unit: {
      type: Array,
      default() {
        return [[3, 'K+'], [6, 'M+'], [9, 'B+']];
      }
    },
    countClass: {
      type: String,
      default: ''
    },
    unitClass: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      counter: null,
      unitText: ''
    };
  },
  computed: {
    counterId() {
      return `count_to_${this._uid}`;
    }
  },
  methods: {
    getHandleVal(val, len) {
      return {
        endVal: parseInt(val / Math.pow(10, this.unit[len - 1][0]), 10),
        unitText: this.unit[len - 1][1]
      };
    },
    transformValue(val) {
      let len = this.unit.length;
      let res = {
        endVal: 0,
        unitText: ''
      };
      if (val < Math.pow(10, this.unit[0][0])) {
        res.endVal = val;
      } else {
        for (let i = 1; i < len; i++) {
          if (val >= Math.pow(10, this.unit[i - 1][0]) && val < Math.pow(10, this.unit[i][0])) {
            res = this.getHandleVal(val, i);
          }
        }
        if (val > Math.pow(10, this.unit[len - 1][0])) {
          res = this.getHandleVal(val, len);
        }
      }
      return res;
    },
    getValue(val) {
      let res = 0;
      if (this.simplify) {
        let { endVal, unitText } = this.transformValue(val);
        this.unitText = unitText;
        res = endVal;
      } else {
        res = val;
      }
      return res;
    }
  },
  mounted() {
    this.$nextTick(() => {
      let endVal = this.getValue(this.end);
      this.counter = new CountUp(
        this.counterId,
        this.startVal,
        endVal,
        this.decimals,
        this.duration,
        {
          useEasing: !this.uneasing,
          useGrouping: this.useGroup,
          separator: this.separator,
          decimal: this.decimal
        }
      );
      window.setTimeout(() => {
        if (!this.counter.error) {
          this.counter.start();
        }
      }, this.delay);
    });
  },
  watch: {
    end(newVal) {
      let endVal = this.getValue(newVal);
      this.counter.update(endVal);
    }
  }
};
</script>

[fisheva]

您好! 我新建文件, 复制进您的代码, 在我这里显示全部是正常的, 后面附代码截图。我把解决办法写在前面: 1, 您先查看下您的Eva Theme版本是不是最新的? 升级至最新。 2, vue的语法高亮好像需要Vetur插件的支持(这是在我打开.vue文件, VSCode自动提示安装的) 3, 如果上面二条都没解决问题, 可能是您别的插件影响, 目前我只遇到过一个:

4, 如果您没这个插件, 那您需要去VSCode的插件文件夹(Windows在 C:/Users/您的用户名/.vscode/extensions。MacOS在Macintosh HD⁩/Users⁩/您的用户名/.vscode⁩/extensions), 保留Eva Theme插件文件夹, 其它插件文件夹先移至别处 → 重启VSCode, 查看是否显示正常 → 如果正常, 逐批移入其它插件文件夹, 再重启VSCode, 查看代码显示, 直至找出问题插件。

如果extensions里只有Eva Theme一个插件文件夹, 依然显示不正常, 我还真不知道怎么办, 有这种情况您再来留言吧。

下面是在我这里, 您的代码截图, 全部显示正常 main.js

count-to.vue

[lovanya]

真心感谢你的帮助。:) 确实是因为插件造成的， Babel Javascript 和 Sublime Babel 都会影响，卸载之后都正常了。