Help us understand the problem. What is going on with this article?

俺的Angularで開発始める前の設定

More than 1 year has passed since last update.

久々にAngularで作ろうとしたら、設定することがこまごまあったのでメモ兼ねてまとめ。
環境は以下の通り。

  • VSCode
  • angular-cli 6.0.8
  • angular:6.0.3

newするときにスタイルをscssに設定

プロジェクトはangular-cliで作りますが、cssではなくscssで作りたいのでプロジェクト作成時に設定します。

ng new プロジェクト名 --style=scss

コードの修正

ng newでプロジェクトを作った直後だとなぜかng testng e2eが通らないので以下の2箇所を修正します。

src/app/app.component.ts/9行目
title = 'app'; // appをプロジェクト名と同じに変更
src/app/app.component.spec.ts/19行目
expect(app.title).toEqual('app'); // appをプロジェクト名と同じに変更

.htmlhintrcの作成

angularのテンプレートとしてhtml使っているため、HTMLHint使ってると警告が出ます。
なので、.htmlhintrcをプロジェクト直下に作って部分的に警告を出さないように設定を記述します。

.htmlhintrc
{
    "tagname-lowercase": true,
    "attr-lowercase": false,
    "attr-value-double-quotes": true,
    "doctype-first": false,
    "tag-pair": true,
    "spec-char-escape": true,
    "id-unique": true,
    "src-not-empty": true,
    "attr-no-duplication": true,
    "title-require": true
}

angularの属性はlowercaseじゃないものも使うため"attr-lowercase"と、
部分的なHTMLのため先頭にDOCTYPE書かないので"doctype-first"をfalseにします。

git-hookの設定

プッシュするときにテストを実行させてからプッシュしたいので、.git/hooks/pre-pushに以下のコマンドを記述します。

ng test --watch=false
ng e2e

ng testのほうは--watch=falseをつけないとテスト後に処理が終了しません。

npm shrinkwrap

Angularだからというわけではないですが、勝手にバージョンが変わらないようにnpm shrinkwrap実行してnpm-shrinkwrap.jsonを作っておきます。

後はgitlab-ciの設定とかもしたけど、それは別記事でまとめる予定です。

(7/17追記)gitlab-ciの設定についてまとめました。
https://qiita.com/frost_star/items/efd624d35edd2aef4379

参考

angular-cli:Wiki
HTMLHit:wiki

frost_star
まだまだ半人前プログラマー。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした